Eu escrevi uma pequena quantidade de código para tentar replicar o jQuery.fadeIn() e.fadeOut() funções usando transições CSS para ter uma aparência melhor em dispositivos de toque.

Idealmente, gostaria de evitar o uso de uma biblioteca para poder escrever exatamente o que eu quero e como um exercício de aprendizado.

fadeOut funciona bem.

A ideia defadeIn é usar transições CSS3 para ajustar a opacidade de um elemento, após o qual o elemento será definido comodisplay:block; (usandois-hidden para garantir que ele ainda não esteja clicável ou que cubra algo abaixo dele.

fadeIn não está funcionando embora. Eu acho que é devido a adicionar ois-animating classe ao mesmo tempo como remover ois-hiding classe. O evento transitionEnd nunca é acionado porque uma transição não ocorre:

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

E o CSS

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

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

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

Aqui está o código:Link CodePen

Update: Eu encontrei o que eu descreveria como um hack, mas isso funciona muito bem:Substituição de CSS3 para jQuery.fadeIn e fadeOut

Código de trabalho após essa correção:Fixo

Uma solução semsetTimeout seria muito valioso embora.