用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是个啥呢。。。

这个网址必读，有详细介绍。

https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleSheet/insertRule

格式有了，然后加上方法的调用以及停止，代码如下

import React, { Component } from 'react'

export default class OneDemo extends Component {
    
    //构造方法，创建组件时调用
    constructor(props){
        super(props)
        this.state={
            data:[1,2,3,4,5,'',6,7,8,9,'',0,2,1,3,4,5,6,7,'',5,4,3,2,1,2,3,9]
        }
    }

    componentDidMount(e) {
        //拿到一个this.refs的数量，是个遍历key的数组，numArr
        let numArr = Object.keys(this.refs)
        //因为是顺序排列的，要最后一位，也等于长度减一
        let num = numArr.length-1
        let startNum = 0
        //我在函数里拿到num，放到state里呗
        this.state.startNum=startNum
        this.state.endNum = num
        //设一个时间函数timer，1000毫秒执行一次
        this.state.timer=setInterval(this.fn,300)
    }
    fn=()=>{27         let animationStyle = this.refs[this.state.startNum].style
        animationStyle.display='inline-block'
        document.styleSheets[0].insertRule(`@keyframes mymove{
            0%{ color:white;transform:rotate(0deg) translateY(0px)}
            70%{color:black;transform:rotate(180deg) translateY(-24px)}
            100%{ color:#666;transform:rotate(360deg) translateY(0px)} }`,0)
        animationStyle.animation='mymove 1s linear forwards'
        //递增
        this.state.startNum++
        //清除timer
        if(this.state.startNum==this.state.endNum+1){
            clearInterval(this.state.timer)
        }
    }
    
    render() {
        return (
            <div className="OneDemo">
               {
                   this.state.data.map((v,i)=>{
                       if(v===''){
                            return(
                                <span key={i} ref={i} style={{display:'inline-block',width:'6px',height:'24px'}}>&nbsp;</span>
                            ) 
                       }else{
                            return(
                                <span key={i} ref={i}  style={{display:'inline-block',width:'6px',height:'24px'}}>{v}</span>
                            ) 
                       }
                        
                   })
               }
            </div>
        )
    }
}

 

你复制一下，就知道这个循环渲染文字加动画，还是不错滴！