⽤js触发CSS3-transition过渡动画
当元素本⾝为display：none时，若此时我们想通过js先将其变为display:block并且随后再触发其他想要的transition过渡效果，需要在 js改变其为display:block后⽤setTimeout延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发。另外，如样式写在html代码中，⽤js设置className 是没有动画效果的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#ondiv{
background: #000;
width: 200px;
height: 50px;
}
.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="ondiv">JS transition</div><p></p>
<div id="div" class="test"></div>
<script type="text/javascript">
//onmouseover
//ElementById("div").style.width="200px"
//ElementById("div").style.height="200px"
}
//ElementById("div").style.width="200px"
/
/ElementById("div").style.height="200px"
}
</script>
</body>
</html>
⼀个使⽤transition实现的⿏标悬停淡阴淡出的效果。⼗分不错，可以参考参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.demo {
float: left;
border:1px solid #ccc;
}
transition用法搭配div.demo i {
cursor: pointer;
height: 50px;
transition: opacity 2s;
width: 50px;
background: #000;
float: left;
margin: 5px;
opacity: 0;
}
div.demo i:hover {
opacity: 1;
transition-duration: 0s;
}
</style>
</head>
<body>
<div class="demo"> <div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。