javascript-jQuery.fadeIn和fadeOut的CSS3替代

2019-11-22 12:37:25 阅读：333 来源： 互联网

标签：css3 css-transitions transition javascript jquery

我编写了少量代码,尝试使用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/

标签：css3,css-transitions,transition,javascript,jquery
来源： https://codeday.me/bug/20191122/2059736.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-jQuery.fadeIn和fadeOut的CSS3替代