animation控制动画暂停/播放

最新推荐文章于 2024-06-12 10:46:02 发布

weixin_33834679

最新推荐文章于 2024-06-12 10:46:02 发布

阅读量2.9k

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000009336854

版权

效果：
图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation控制动画暂停/播放</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <style>
    .box{width: 200px;height: 120px;border: 1px solid #f00;}
    .animate{-webkit-animation: changebg 2s ease infinite alternate;}
    @-webkit-keyframes changebg{
        0{background-color: orange;}
        25%{background-color: yellow;}
        50%{background-color: green;}
        75%{background-color: pink;}
        100%{background-color: blue;}
    }
    </style>
    <div class="box animate"></div>
    
    <button class="control" type="button">暂停动画</button>

    <script>
    var btnSelector = document.querySelector('.control'),
        animateSelector = document.querySelector('.animate');
    btnSelector.addEventListener('click', function() {
        if(this.textContent == '暂停动画') {
            this.textContent = '播放动画';
            animateSelector.style.webkitAnimationPlayState = 'paused';
        } else {
            this.textContent = '暂停动画';
            animateSelector.style.webkitAnimationPlayState = 'running';
        }
    });
    </script>
</body>
</html>

动画事件：

animateSelector.addEventListener('animationstart', function() {
    console.log('动画开始');
});
animateSelector.addEventListener('animationend', function() {
    console.log('动画结束');
});
animateSelector.addEventListener('animationiteration', function() {
    console.log('动画迭代');
});

过渡事件：

transitionSelector.addEventListener('transitionend', function() {
    console.log('过渡结束了');
});

以上的事件都可以加浏览器前缀，webkit moz等

weixin_33834679

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
animation控制动画暂停/播放

效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>animation控制动画暂停/播放</title> <script src="jquer...
复制链接

扫一扫