js触发 CSS3-transition过渡动画
2017-08-20 本文已影响310人
xilong
参考文章 http://blog.csdn.net/pspgbhu/article/details/51448655
如果不用js，我们大多数把 transition 属性用在hover上
平时我们直接使用transition属性过渡效果，一般是这样的。
鼠标移入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>
此外，我还发现了一个比较有趣的事情
1. 我们一般把 transition 属性写在选择器上面，如果写在hover上会是一样的吗？
.test:hover{
background: red;
width: 200px;
height: 200px;
transition: all 1s; /*写在这里了*/
}
结果是真的不一样，写在hover上面就只有在移入的时候有动画效果，移出的时候就没有动画效果了
如果想用js控制 transition 怎么办了？
其实dom 操作其 css就行了。
例如 div 的css设置如下
.test{
background: red;
width: 100px;
height: 100px;
transition: all 1s;
}
然后在js中通过dom操作来改变div的css的具体属性，如
obj.style.width="400px"
这时就会触发css的过渡动画。
一个需要注意的地方
当元素本身为display：none时，若此时我们想通过js先将其变为display:block 并且随后再(请注意此关键词)触发其他想要的transition过渡效果，需要在 js改变其为display:block 后延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发。
这个是因为 transition不支持display属性。
