jQuery.fadeIn 和 fadeOut 的 CSS3 替换

Question

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

理想情况下，我希望避免使用库，这样我就可以准确地编写我想要的内容，并作为学习练习。

fadeOut 运行良好。

fadeIn 的想法是使用 CSS3 过渡来调整元素的不透明度，之后该元素将被设置为 display:block;（使用 is-hidden 类）以确保它仍然不能被点击或覆盖下面的东西它。

fadeIn 不工作。我认为这是由于在删除 is-hiding 类的同时添加了 is-animating 类。由于没有发生转换，因此不会触发 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 link

更新：我发现了我所说的 hack，但效果很好：CSS3 replacement for jQuery.fadeIn and fadeOut

此修复后的工作代码：Fixed

没有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 fixed code

Answer 2

您可能需要考虑几个插件来满足您的需求：

• jQuery.transition.js 改进了现有的 jQuery 动画方法，以便在支持它们的浏览器中使用 CSS 过渡。

• Transit 添加了一个transition 函数，您可以使用它来定义自己的过渡。它使用 jQuery 的效果队列，因此您可以将更改后的 display 值排队以在 opacity 完成过渡后运行。

Answer 3

使用关键帧的替代解决方案

js

var div=document.getElementsByTagName('div')[0],
    btn=document.getElementsByTagName('button')[0];

div.addEventListener('webkitAnimationEnd',function(e){
 div.style.display=div.classList.contains('hide')?'none':'';
},false);

btn.addEventListener('click',function(e){
 div.style.display='';
 div.classList.toggle('hide');
},false);

css3

div{
 background-color:green;
 -webkit-animation:x 700ms ease 0ms 1 normal running;/*normal*/
 opacity:1;
}
div.hide{
 -webkit-animation:x 700ms ease 0ms 1 reverse running;/*reverse*/
 opacity:0;
}
@-webkit-keyframes x{
 0%{opacity:0;}
 100%{opacity:1;}
}

例子

http://jsfiddle.net/qQM5F/8/

---

这是一个原型

Object.defineProperty(HTMLElement.prototype,'toggleOpacity',{value:function(){
 function check(e){
  this.style.display=this.classList.contains('hide')?'none':'';
  this.removeEventListener('webkitAnimationEnd',check,false);// clean up
 }
 this.addEventListener('webkitAnimationEnd',check,false);
 this.style.display='';
 this.classList.toggle('hide');
},writable:false,enumerable:false});

css

.fade{
 -webkit-animation:x 700ms ease 0 1 normal;
 opacity:1;
}
.fade.hide{
 -webkit-animation:x 700ms ease 0 1 reverse;
 opacity:0;
}
@-webkit-keyframes x{
 0%{opacity:0}
 100%{opacity:1}
}

用法

你需要淡入淡出的元素需要一个 fade 类，然后用它切换

element.toggleOpacity();

例子

http://jsfiddle.net/qQM5F/9/

Answer 4

我不知道您真正想要实现什么，但如果您使用 css3，那么您使用的是现代浏览器。在这种情况下，纯 css 和 javascript 是更好的解决方案。

关键在于你如何编写 css 过渡。

这里是js代码

var div=document.getElementsByTagName('div')[0],
    btn=document.getElementsByTagName('button')[0];
div.addEventListener('click',function(){
 this.classList.add('hide');
},false);
div.addEventListener('webkitTransitionEnd',function(e){
 console.log(e.propertyName);
},false);
btn.addEventListener('click',function(e){
 div.classList.toggle('hide');
},false);

css代码

div{
 width:200px;height:200px;
 opacity:1;
 overflow:hidden;
 line-height:200px;
 text-align:center;
 background-color:green;
    -webkit-transition:opacity 700ms ease 300ms,height 300ms ease ;
}
div.hide{
 height:0px;
 opacity:0;
    -webkit-transition:opacity 700ms ease,height 300ms ease 700ms;
 /*add the various -moz -ms .. prefixes for more support*/
}

和html

some text 
<div>click here</div>
some text
<button>toggle</button>

这是一个例子。

http://jsfiddle.net/qQM5F/1/