用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
            document.getElementById("ondiv").onclick=function(){
                document.getElementById("div").className = 'test test-hover';
                //document.getElementById("div").style.width="200px"
                //document.getElementById("div").style.height="200px"
            }
            document.getElementById("ondiv").onmouseleave=function(){
                document.getElementById("div").className = 'test';
                //document.getElementById("div").style.width="200px"
                //document.getElementById("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;
}
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>

 

posted @ 2019-03-31 18:34  笠航  阅读(15475)  评论(0)    收藏  举报