用js控制css的animation动画的小想法

最新推荐文章于 2024-01-05 13:24:17 发布

原创最新推荐文章于 2024-01-05 13:24:17 发布 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

想法专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript来控制CSS动画，实现点击按钮启动动画的效果。作者首先遇到的问题是无法直接修改keyframes内容，于是采取了创建两个不同class的方式，通过切换class实现动画的开始和结束状态。示例中展示了HTML、CSS和JavaScript的代码片段，通过为元素添加或移除'pic2'类来触发和结束动画。

之前写作业想要实现通过点击触发animation动画的效果。理论上可以用js修改css达到目的，不过我不晓得怎样修改keyframes里的内容，在网上也没找到合适的方法。一开始我的思路是写两份css，一份初始状态，一份是点击之后需要显示的效果，但在实际操作中发现如果直接替换css的话，动画效果并不会出现，只能显示动画结束时的状态。所以后面我改变了做法，不改变文件，而是改变css代码块。简单来说就是对同一内容写两份不同的css代码块，通过更换class的值达到修改css的效果。

实例：

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" src="index.css" type="text/css">
    <script type="text/javascript" src="control.js"></script>
</head>
<body>
    <div id="pic" class="pic1">
        <img src="pic.jpg">
    </div>
　　<button type="button" onclick="next()">start</button>

</body>
</html>

css

.pic1{           /*初始状态*/
    position: relative;
    width:50%;
    top:50%;
}

/*动画*/
.pic2{
    position: relative;
    width:50%;
    top:50%;
    animation-name: pic2;
    animation-duration: 3s;
    animation-fill-mode: both;
}

@-webkit-keyframes pic2{     /*适用于chrome*/
    0% {
        width:90%;
        top:50%;
    }
    50%{
        width:50%;
        top:50%;
    }
    100% {
        width:50%;
        top:10%;
    }
}

function next(){
    document.getElementById("pic").className="pic2";
}

这样就实现了对animation的控制。