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 link

更新：我找到了我所描述的黑客行为，但效果很好：CSS3 replacement for jQuery.fadeIn and fadeOut

此修复后的工作代码：Fixed

没有setTimeout的解决方案会非常有价值。

Answer 1

我不知道你真正希望实现的目标，但如果你使用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/

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

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

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

CSS3替换jQuery.fadeIn和fadeOut

4 个答案: