javascript-jQuery.fadeIn和fadeOut的CSS3替代

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

理想情况下,我想避免使用库,这样我就可以准确地编写自己想要的内容,并作为学习练习.

fadeOut效果很好.

fadeIn的想法是使用CSS3过渡来调整元素的不透明度,然后将元素设置为display：block;. (使用is-hidden类)以确保它仍然不可点击或覆盖其下面的内容.

fadeIn不能正常工作.我认为这是由于在删除is-hide类的同时添加了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的解决方案将非常有价值.

解决方法:

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

javascript-jQuery.fadeIn和fadeOut的CSS3替代

相关推荐