Napisałem niewielką ilość kodu, aby spróbować replikować jQuery.fadeIn() i.fadeOut() funkcje wykorzystujące przejścia CSS, aby lepiej wyglądać na urządzeniach dotykowych.

Idealnie chciałbym uniknąć korzystania z biblioteki, aby móc pisać dokładnie to, czego chcę, i jako ćwiczenie do nauki.

fadeOut działa dobrze.

Pomysł nafadeIn jest użycie przejść CSS3 w celu dostosowania krycia elementu, po czym element zostanie ustawiony nadisplay:block; (za pomocąis-hidden klasa), aby upewnić się, że nie jest nadal klikalny lub nie zakrywa czegoś pod nim.

fadeIn nie działa jednak. Myślę, że to z powodu dodaniais-animating klasa w tym samym czasie co usuwanieis-hiding klasa. Zdarzenie przejściaEnd nigdy nie jest uruchamiane, ponieważ przejście nie następuje:

function fadeIn (elem, fn) {
  var $elem = $(elem);

  $elem.addClass('is-animating');
  $elem.removeClass('is-hidden');
  $elem.removeClass('is-hiding');

  $elem.on(transitionEndEvent, function () {

    $elem.removeClass('is-animating');

    if (typeof fn === 'function') {
      fn(); 
    }
  });
}; 

I CSS

.is-animating {
  @include transition(all 2000ms);
}

.is-hiding {
  // Will transition
  @include opacity(0);
}

.is-hidden {
  // Won't transition
  display: none;
}

Oto kod:Link CodePen

Aktualizacja: Znalazłem to, co opiszę jako hack, ale to działa bardzo dobrze:Zastąpienie CSS3 dla jQuery.fadeIn i fadeOut

Kod roboczy po tej poprawce:Naprawiony

Rozwiązanie bezsetTimeout byłoby jednak bardzo cenne.