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>
这是一个例子.
标签:css3,css-transitions,transition,javascript,jquery 来源: https://codeday.me/bug/20191122/2059736.html