Я написал небольшое количество кода, чтобы попытаться повторить 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 fn === 'function') {
      fn(); 
    }
  });
}; 

И CSS

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

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

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

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

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

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

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