Я написал небольшое количество кода, чтобы попытаться повторить JQuery's.fadeIn() а также.fadeOut() функции, использующие переходы CSS, чтобы выглядеть лучше на сенсорных устройствах.

В идеале я бы хотел избежать использования библиотеки, чтобы я мог написать именно то, что я хочу, и в качестве учебного упражнения.

fadeOut работает хорошо.

Идея дляfadeIn использовать переходы CSS3 для настройки непрозрачности элемента, после чего элемент будет установлен наdisplay:block; (с помощьюis-hidden класс), чтобы убедиться, что он не кликабелен и не скрывает что-то под ним.

fadeIn не работает, хотя Я думаю, что это связано с добавлениемis-animating класс в то же время, как удалениеis-hiding класс. Событие transitionEnd никогда не срабатывает, потому что переход не происходит:

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 f,n === 'function') {
      fn(); 
    }
  });
}; 

И CSS

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

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

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

Вот код:CodePen ссылка

Обновление: я нашел то, что я бы назвал взломать, но это работает очень хорошо:CSS3 замена для jQuery.fadeIn и fadeOut

Рабочий код после этого исправления:Исправлена

Решение безsetTimeout было бы очень ценно, хотя.