用js控制css动画效果@keyframes
Posted GGbondMan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js控制css动画效果@keyframes相关的知识，希望对你有一定的参考价值。
今天看到一个css动画样式，然后打算封装一个这个css样式。
我用的react组件，然后map了我要的全部盒子
遇到了困难，我打印e和this，都没有我想用的东西。
持续性困惑。
陷入沉思和沉睡。
然后不停打印refs。。。
天啊，我在干什么。我执着地寻找style。。。
我在return的盒子里加了一个style，然后打印了style，的确可以改变css属性
我突然意识到，我需要打印更原始，或者说更底层的一些东西
于是我开始打印window和document，笨蛋啊，操作dom啊
我打印了document，然后开始点方法打印styleSheets
是个数组，然后百度了styleSheets，
应用于文档的所有样式表是通过document.styleSheets集合来表示。通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号语法或itme()方法可以访问每一个样式表。
还查看了这个parentStyleSheet:
parentStyleSheet：在当前样式表是通过@import导入的情况下，这个属性是一个指向导入它的样式表的指针。
我要写动画！我要写动画！
我要怎么才能用上它呢？
this.refs[0].style.animation=‘myMove 5s‘
document.styleSheets[0].insertRule(`@keyframes mymove{from{ color:‘red‘ }to{color:‘blue‘}`,0)
insertRule是个啥呢。。。
这个网址一定要看，一定要看！
讲了insertRule的方法和一些限制。
以上是关于用js控制css动画效果@keyframes的主要内容，如果未能解决你的问题，请参考以下文章