如何触发css3过渡动画
分类:实例代码
实际应用中,我们应该如何触发transition过渡动画呢。
关于transition动画可以参阅CSS3 transition一章节。
其实触发transition动画的本质条件只有一个,过渡的css属性的值发生了变化。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> div { width: 100px; height: 40px; background: #ccc; transition: width .5s; } div:hover{ width:200px; cursor:pointer; } </style> </head> <body> <div></div> </body> </html>
当鼠标悬浮的时候,div元素的宽度发生了改变,那么这时候动画就开始了。
当然我们也可以通过js的方式来改变元素的属性值,同样也可以触发动画的进行。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> div { width: 100px; height: 40px; background: #ccc; transition: width .5s; } .antzone{ width:200px; cursor:pointer; } </style> <script> window.onload = function () { var odiv = document.querySelector("div"); var obt = document.querySelector("input"); obt.onclick = function () { odiv.classList.add("antzone"); } } </script> </head> <body> <div></div> <input type="button" value="查看效果"> </body> </html>
通过js也可以实现修改对应过渡属性的值,然后触发动画。
(1).document.querySelector()参阅document.querySelector()一章节。
(2).classList参阅JavaScript classList 属性一章节。