问答: - 问答 - 第一PHP社区 php1.cn

问

发布于 1970-01-01 08:00

2 个回答

推荐你使用 gsap 套件，用这个库做动画可以更加方便一些。
官网 http://greensock.com
安装 bower install gsap

2022-11-14 16:03 回答

男人不用卫生巾
这么理解吧，这是一个 CSSRuleList，在被你展开之前，CSSRuleList 的信息仅是一个指针，控制台并没有缓存到这个 List 的所有信息。

因此，当你展开之后，读取到的信息已经是修改后的了。

你可以做这样的一个测试，先 console.log 出来，不展开，然后进行修改，结果也是修改之后的信息！！

下面的回答有点跑题，但是可以实现改变动画效果的最终目的。
不能理解为何一定要修改@keyframes，而不直接改变 ClassName。
animation 的效果是可被覆盖的。

增加一个 ClassName 比修改样式表要方便多了！
```
<!DOCTYPE html>
<html>
<head>
<style> 
.a
{
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation:mymove 5s infinite;
}

.b
{
-webkit-animation:mymove2 5s infinite;
}


@-webkit-keyframes mymove2
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

</style>
</head>
<body>
<button onclick="document.getElementById('a').className+=' b'">变换动画</button>
<p id="a" class="a"></p>
</body>
</html>
```
2022-11-14 16:03 回答

手机用户2502938015

撰写答案

今天，你开发时遇到什么问题呢？

热门标签

PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved

京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区版权所有