CSS3 replacement for jQuery.fadeIn and fadeOut

本文关键字：and fadeOut fadeIn jQuery replacement for CSS3 更新时间：2023-12-03

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

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

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链接

更新：我发现了我所说的黑客攻击，但效果很好：CSS3取代了jQuery.fadeIn和fadeOut

修复后的工作代码：修复

不过，没有setTimeout的解决方案将非常有价值。

我不知道你真正想要实现什么，但如果你使用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/

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

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/

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

jQuery.transition.js对现有的jQuery动画方法进行了改造，以便在支持它们的浏览器中使用CSS转换。
Transit添加了一个transition函数，可用于定义自己的转换。它使用jQuery的效果队列，因此您可以将更改后的display值排队，以便在opacity完成转换后运行。

我已经设法通过做一些让人觉得不自然和棘手的事情来解决这个问题：

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固定代码