css3元素出现动画实例-XboxYan前端工作站-SegmentFault思否
css3中实现动画一般有两种方式,一个是transition过渡,一个是animation动画。最主要区别就是transition需要条件触发,通常会用hover来触发,而animation则更灵活,可以自动播放,也可以通过条件触发。
那么,如何实现一个元素出现动画呢?
如果是transition,可以很轻松的实现这一效果,例如
.box{ visibility:hidden; opacity:0; transform:translatey(100px); transition:.3s; } .show{ visibility:visible; opacity:1; transform:translatey(0); }
这样就实现了一个“从下至上,透明度从0至1”的出现动画,很常用不是吗。
https://codepen.io/xboxyan/pe...
当然,我们也可以用animation来实现,
.box{ visibility:hidden; opacity:0; transform:translatey(100px); transition:.3s; } .show{ animation:show .5s forwards; } .hide{ visibility:visible; opacity: 1; transform: translatey(0); animation:hide .5s forwards; } @keyframes show{ to { visibility:visible; opacity: 1; transform: translatey(0) } } @keyframes hide{ to { visibility:hidden; opacity: 0; transform: translatey(100px) } }
我的天,居然要写这么多,才能实现和上面一样的效果,没办法,出现和消失是两组不同的动画,所以需要定义两个动画。
https://codepen.io/xboxyan/pe...
元素出现动画
上面简单的介绍了动画的两种实现方法。严格来讲,transition只是过渡,只是切换样式过程中有动画的效果,而animation才是真正做动画的。当然也需要根据自己的实际需求来选择。
下面来看这样一个需求:
通常页面上要全局显示一个消息提示,类似于toast效果。这是我通常的做法
function showmessage(txt){ this.timer && cleartimeout(this.timer); var odiv = document.getelementbyid('messageinfo'); if(!odiv){ odiv = document.createelement('p'); odiv.classname = 'messageinfo'; odiv.id = 'messageinfo'; document.body.appendchild(odiv); } odiv.innerhtml = '<span>'+txt+'</span>'; odiv.classlist.add('show'); this.timer = settimeout(function(){ odiv.classlist.remove('show'); },2000) }
原理就是,向页面添加一个p#messageinfo容器,然后添加类名.show让元素出现,2s后自动移除.show实现隐藏,效果如下
https://codepen.io/xboxyan/pe...
可以很明显的看到一个效果就是,第一次出现的时候是没有动画的,以后就正常了。可能平时项目中,这一点小瑕疵也没什么影响,毕竟很大一部分人连动画都不给啊,直接就是display:none和display:block,可以说是提不上体验了。
那么,为什么会出现这种现象呢?
首先明白一点,transition是不会自动触发的,上面是通过添加和移除类名来实现过渡效果的。但是在第一次元素刚刚创建的时候,此时在页面上该元素还未加载完成,这个时候立即添加类名,其实是可以等同于是一起创建的,没有形成过渡效果。解决这个问题很简单,就是稍微延时一下
//... settimeout(function(){ odiv.classlist.add('show'); },50) //...
这样就基本上解决了这个问题,如下
https://codepen.io/xboxyan/pe...
但是,理论上这里的延迟越小越好,我测试了一下,大概和的性能有关吧,用定时器的目的也仅仅是等待元素加载完成,而dom也没有原生监听加载完成事件,所以只能用定时器估一个大概的值。
但是,这仍然是一个瑕疵,从代码结构上来讲,这也是无法忍受的。那么,还有没有更好的方法呢?答案就是animation
animation
虽然从开头的例子来看,animation的写法又臭又长,但是也正体现出它的功能强大,其中之一就是自动播放动画
那么,把上面的toast改造一下,用animation实现
.messageinfo{ /**...**/ animation:show .5s forwards; } .hide{ visibility:visible; opacity: 1; transform: translatey(0); animation:hide .5s forwards; } @keyframes show{ to { visibility:visible; opacity: 1; transform: translatey(0) } } @keyframes hide{ to { visibility:hidden; opacity: 0; transform: translatey(-100%) } }
js基本和之前一致
function showmessage(txt){ this.timer && cleartimeout(this.timer); var odiv = document.getelementbyid('messageinfo'); if(!odiv){ odiv = document.createelement('p'); odiv.classname = 'messageinfo'; odiv.id = 'messageinfo'; document.body.appendchild(odiv); } odiv.innerhtml = '<span>'+txt+'</span>'; odiv.classlist.remove('hide');//默认是显示 this.timer = settimeout(function(){ odiv.classlist.add('hide');//2s后隐藏 },2000) }
效果如下
https://codepen.io/xboxyan/pe...
可以说是相当完美了
其他应用场景
元素添加动画
通常在添加表单或者上传图片时,如果需要让新添加的元素产生一个动画效果,那么可以用到animation
https://codepen.io/xboxyan/pe...
当然,还可以做到分页加载动画,需要给每个元素添加一个延时animation-delay即可
/*animation-delay*/ .list li:not(.hide):nth-child(5n + 1) { animation-delay: .3s; } .list li:not(.hide):nth-child(5n + 2) { animation-delay: .6s; } .list li:not(.hide):nth-child(5n + 3) { animation-delay: .9s; } .list li:not(.hide):nth-child(5n + 4) { animation-delay: 1.2s; } .list li:not(.hide):nth-child(5n + 5) { animation-delay: 1.5s; }
效果如下,元素会依次登场,预览窗口比较小,建议在原链接查看
https://codepen.io/xboxyan/pe...
然后,还可以实现九宫格动画,让元素在出现的时候从左上方依次向右下方扩散,同样是用到了animation-delay
https://codepen.io/xboxyan/pe...
很酷炫不是吗,无需用到js,也无需用到其它框架,纯天然,支持的浏览器体验更上一层楼,不支持的浏览器也无伤大雅
小节
总体来说,animation远比transition要强大的多,当然在实际使用中也要分场景(比如文章开头的那个例子很明显就是transition更好),如果有交互,如鼠标移入,首先看transition能否实现,其次才是animation,如果像这一类元素出现(生成)动画,那么就需要使用到animation了。