CSS3替换jQuery.fadeIn和fadeOut
我编写了少量代码来尝试使用CSS过渡来复制jQuery的.fadeIn()和.fadeOut()函数，以便在触摸设备上更好看。
理想情况下，我想避免使用图书馆，以便我可以准确地写出我想要的内容，并作为学习练习。
fadeOut效果很好。
fadeIn的想法是使用CSS3过渡来调整元素的不透明度，之后元素将被设置为display:block; （使用is-hidden类）以确保它不是可点击的或覆盖它下面的东西。
fadeIn虽然不起作用。 我认为这是因为在删除is-animating类的同时添加了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链接
更新：我已经找到了我所描述的黑客攻击，但是效果非常好： 用于jQuery.fadeIn和fadeOut的CSS3替换
此修复后的工作代码：已修复
没有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 click here some text
这是一个例子。
使用关键帧的替代解决方案
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;} }
例
这是一个原型
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();
例
您可能需要考虑几个可能会照顾您想要的插件：
-
jQuery.transition.js改进了现有的jQuery动画方法，以便在支持它们的浏览器中使用CSS转换。
-
Transit添加了一个
transitionfunction，可用于定义自己的过渡。 它使用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固定代码