用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现.
CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段.
例如我们想在动画效果完成时调用回调函数来处理一些事务,会发现CSS并没有提供直接的方法来让我们使用.
一.css动画简介
css动画效果有两种,即过渡和动画.
1.过渡
当元素从一种样式转变为另一种样式,我们为这种转变添加动画效果,这种效果就称作过渡.
CSS的过渡是通过 transtion 属性实现的.
transtion属性必须包含以下两个值:
- 要添加过渡效果的样式属性名
- 过渡效果持续时间
另外还有两个可选的属性值:
- 过渡效果的速度时间曲线函数
- 过渡效果的延迟时间
下面是一个CSS过渡效果的例子:
div{ width: 100px; transition: width 2s; -webkit-transtion:width 2s; } div.hover{ width: 300px; }
当鼠标移动到此div上时,此div宽度会增加200px.
我们为宽度添加上 2s 过渡效果.最后效果如下:
2.动画
在实现比较复杂的动画时,单纯使用过渡已经无法达到目的,可以选择使用CSS的animation属性来定义动画效果.
要想使用animation属性,我们必须先了解一下CSS3加入的@keyframes规则.
@keyframes规则用于创建动画,可以从动画运动状态的帧来定义动画.
如下即@kayframes定义动画的例子:
@keyframes show { from {color: red;} to {color: yellow;} } @-webkit-keyframes show /* Safari 与 Chrome */ { from {color: red;} to {color: yellow;} }
通过@keyframes我们可以定义动画从开始到结束的样式变化 .
我们也可以通过定义动画效果的百分比状态来定义动画样式,如下
@keyframes show { 0% {color: red;} 25% {color: yellow;} 50% {color: blue;} 100% {color: green;} } @-webkit-keyframes show /* Safari 与 Chrome */ { 0% {color: red;} 25% {color: yellow;} 50% {color: blue;} 100% {color: green;} }
在使用@keyframes定义了动画效果之后,我们可以通过 animation 来将动画效果绑定到元素,如下:
div:hover{ animation:show 5s; }
具体效果如下:
动画文字
鼠标移动其上即可看到动画效果
以上就是CSS动画的简单介绍,另外CSS3还添加了transform属性,用于2D和3D转换,也被经常用来作为动画使用.
二.CSS动画的回调函数
像以上的CSS动画,如果想使用回调函数来控制动画完成后的事务处理,是比较麻烦的.
一.延时函数
很多人使用JS的延时函数 setTimtout() 来解决CSS动画的回调问题,类似如下的代码:
setTimtout(function(){ dosomething() //动画的回调函数 }, delaytime); //动画的持续时间
但是这种方法由于并不是真正意义的回调,会造成以下几个问题:
- 由于动画和延时函数并不一定是同一时间开始,导致函数和动画不同步
- 会造成JS代码和CSS代码相互关联耦合,修改和维护比较麻烦
- 存在多个动画需要回调时会造成代码混乱和臃肿
- 在多个动画效果同时结束时会引起回调函数冲突
因此,不建议使用延时函数作为动画的回调函数.
二.JS事件
其实,JS提供了两个事件,可以完美的解决动画的回调函数问题,那就是 transtionend 和 animationend,当动画完成时,即会触发对应的事件.
我们可以通过这两个事件轻松优雅的为动画添加回调函数.
具体用法如下:
transtionend
document.getElementById("myDIV").addEventListener("transitionend", myFunction); //myFunction即为动画回调函数
animationend
document.getElementById("myDIV").addEventListener("animationend", myFunction); //myFunction即为回调函数
我们通过以下这个例子来体验这两个事件的具体使用:
<style> div#test { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div#test:hover { width:300px; } </style> </head> <body> <div id="test"> </div> <script> document.getElementById("test").addEventListener("transitionend", myFunction); function myFunction() { this.innerHTML = "回调函数触发div变为粉色"; this.style.backgroundColor = "pink"; } </script>
效果如下:
当然也可以使用Jquery库的动画回调函数,很简单,代码类似如下,
$("#item").animate({height:"200px"}, function() {
alert("hello");
});
以上就是关于CSS动画回调函数的一些知识,希望对你有帮助.