He escrito una pequeña cantidad de código para tratar de replicar jQuery's.fadeIn() y.fadeOut() Funciones que utilizan transiciones CSS para verse mejor en dispositivos táctiles.

Idealmente, me gustaría evitar usar una biblioteca para poder escribir exactamente lo que quiero y como un ejercicio de aprendizaje.

fadeOut funciona bien.

La idea defadeIn es usar transiciones CSS3 para ajustar la opacidad de un elemento, después de lo cual el elemento se configurará endisplay:block; (utilizandois-hidden clase) para asegurarse de que aún no se pueda hacer clic o que cubra algo debajo de él.

fadeIn aunque no esta funcionando Creo que es por agregar elis-animating clase al mismo tiempo que la eliminación de lais-hiding clase. El evento transitionEnd nunca se dispara porque no se produce una transición:

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

Y el CSS

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

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

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

Aquí está el código:CodePen link

Actualización: he encontrado lo que describiría como un hack, pero eso funciona muy bien:Reemplazo de CSS3 para jQuery.fadeIn y fadeOut

Código de trabajo después de esta corrección:Fijo

Una solución sinsetTimeout Sin embargo sería muy valioso.