用js触发CSS3-transition过渡动画
2016-05-18 23:21
501 查看
用js触发CSS3-transition过渡动画
经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例如说在动画出发触发上就没有js灵活,因此我就开始考虑将CSS3与Js结合使用。不过要注意CSS3属性兼容性问题
平时我们直接使用transition动画一般是这样的
鼠标放置在div方块上触发动画效果(鼠标悬浮div上即可触发)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .test{ background: red; width: 100px; height: 100px; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition:all 1s; } .test:hover{ background: red; width: 200px; height: 200px; } </style> <body> <div id="div" class="test"></div> </body> </html>
现在如果想用js控制transition过渡动画怎么办呢?
最开始我是想和CSS控制动画一样,直接改变其className,但是发现没有动画效果。
后来经过了一番探索发现,通过dom操作其css属性就行了。
例如
div的css设置如下
div{ width:200px; height:200px; transition: all 1s; }
然后在js中通过dom操作来改变div的css的具体属性,如
obj.style.width="400px"
这时就会触发css的过渡动画。
下例为成功使用Js出发CSS3动画(鼠标点击触发)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .test{ background: red; width: 100px; height: 100px; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition:all 1s; } </style> <body> <div id="div" class="test"></div> <script type="text/javascript"> document.getElementById("div").onclick=function(){ document.getElementById("div").style.width="200px" document.getElementById("div").style.height="200px" } </script> </body> </html>
一个需要注意的地方:
今天在工作中无意发现,当元素本身为
display:none时,若此时我们想通过js先将其变为
display:block并且随后再触发其他想要的transition过渡效果,需要在 js改变其为
display:block后延迟100ms左右的时间再去设置其他过渡动画,否则该过渡动画不会触发。
有时间我会将其整理成另外一个博文。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究