Ich habe eine kleine Menge Code geschrieben, um zu versuchen, jQueries zu replizieren.fadeIn() und.fadeOut() Funktionen, die CSS-Übergänge verwenden, um auf Touch-Geräten besser auszusehen.

Idealerweise würde ich es vermeiden, eine Bibliothek zu benutzen, damit ich genau das schreiben kann, was ich will, und als Lernübung.

fadeOut funktioniert gut.

Die Idee fürfadeIn Mit CSS3-Übergängen können Sie die Deckkraft eines Elements anpassen. Danach wird das Element auf gesetztdisplay:block; (mitis-hidden Klasse), um sicherzustellen, dass es nicht noch anklickbar ist oder etwas darunter verdeckt.

fadeIn funktioniert aber nicht. Ich denke, es liegt am Hinzufügen deris-animating Klasse zur gleichen Zeit wie das Entfernen deris-hiding Klasse. Das Ereignis "transitionEnd" wird nie ausgelöst, da kein Übergang auftritt:

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(); 
    }
  });
}; 

Und das CSS

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

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

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

Hier ist der Code:CodePen-Link

Update: Ich habe gefunden, was ich als Hack bezeichnen würde, aber das funktioniert sehr gut:CSS3-Ersatz für jQuery.fadeIn und fadeOut

Arbeitscode nach diesem Update:Fest

Eine Lösung ohnesetTimeout wäre aber sehr wertvoll.