jQuery.fadeIn 和fadeOut 的CSS3 替换

Question

我编写了少量代码来尝试使用 CSS 转换复制 jQuery.fadeIn()和.fadeOut()函数，以便在触摸设备上看起来更好。

理想情况下，我想避免使用图书馆，这样我就可以准确地写出我想要的东西，并作为一种学习练习。

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

这是代码：CodePen 链接

更新：我发现了我所说的 hack，但效果很好：CSS3 替换 jQuery.fadeIn 和fadeOut

此修复后的工作代码：已修复

但是，没有的解决方案setTimeout将非常有价值。

Answer 1

我已经通过做一些感觉不自然和黑客的事情来解决这个问题：

function fadeIn (elem, fn) {
  var $elem = $(elem);

  $elem.addClass('is-animating');
  $elem.removeClass('is-hidden');

  // Smelly, setTimeout fix
  setTimeout(function () {
    $elem.removeClass('is-hiding');
  }, 0);

  $elem.on(transitionEndEvent, function () {

    $elem.removeClass('is-animating');

    if (typeof fn === 'function') {
      fn(); 
    }
  });
}; 

将该setTimeout函数添加到包含可转换属性的类中可以解决该问题。

这里的工作代码：Codepen 固定代码