首页 > Web开发 > 详细

用js控制css动画效果@keyframes

时间:2020-02-05 00:29:36      阅读:125      评论:0      收藏:0      [点我收藏+]

今天看到一个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

原文:https://www.cnblogs.com/GGbondLearn/p/12261972.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!