CSS 3.0过渡完成事件妙用-CFANZ编程社区

CSS 3.0过渡完成事件妙用

在CSS中其实是有一个过渡完成事件可以监听的，利用这个事件，我们可以做一些有意思的事情，比如做一个下面这样的效果。

CSS 3.0过渡完成事件妙用_html

以下是代码实现。

<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>CSS 3.0过渡完成事件的妙用</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
 
        div {
            width: 200px;
            height: 200px;
            background: black;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -100px 0 0 -100px;
            transition: 0.5s;
        }
      </style>
</head>
 
<body>
    <div id='div1'></div>
    <script type="text/javascript">
        div1.onclick = function () {
            this.style.transform = 'rotate(90deg)';
        }
        //transitionend为过渡完成后的事件
        div1.addEventListener('transitionend', function () {
            if (div1.style.background == 'red') {
                div1.style.transform = 'rotate(0deg)';
                div1.style.background = 'black';
            } else {
                div1.style.background = 'red';
            }
        })
    </script>
</body>
 
</html>

0 条评论