⽤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导⼊的情况下，这个属性是⼀个指向导⼊它的样式表的指针。
我要写动画！我要写动画！
我要怎么才能⽤上它呢？
document.styleSheets[0].insertRule(`@keyframes myMove{from{ color:'red' }to{color:'blue'}`,0)
insertRule是个啥呢。。。
这个⽹址必读，有详细介绍。
格式有了，然后加上⽅法的调⽤以及停⽌，代码如下
1 import React, { Component } from 'react'
2
3 export default class OneDemo extends Component {
4
5//构造⽅法，创建组件时调⽤
6    constructor(props){
7        super(props)
8this.state={
9            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]
10        }
11    }
12
13    componentDidMount(e) {
14//拿到⼀个fs的数量，是个遍历key的数组，numArr
15        let numArr = Object.fs)
16//因为是顺序排列的，要最后⼀位，也等于长度减⼀
17        let num = numArr.length-1
18        let startNum = 0
19//我在函数⾥拿到num，放到state⾥呗
20this.state.startNum=startNum
dNum = num
22//设⼀个时间函数timer，1000毫秒执⾏⼀次
23this.state.timer=setInterval(this.fn,300)
24    }
25    fn=()=>{27        let animationStyle = fs[this.state.startNum].style
28        animationStyle.display='inline-block'
29        document.styleSheets[0].insertRule(`@keyframes mymove{
30            0%{ color:white;transform:rotate(0deg) translateY(0px)}
31            70%{color:black;transform:rotate(180deg) translateY(-24px)}
32            100%{ color:#666;transform:rotate(360deg) translateY(0px)} }`,0)
33        animationStyle.animation='mymove 1s linear forwards'
34//递增
35this.state.startNum++
36//清除timer
37if(this.state.startNum==dNum+1){
38            clearInterval(this.state.timer)
39        }
js文字动画特效40    }
41
42    render() {
43return (
44            <div className="OneDemo">
45                {
46this.state.data.map((v,i)=>{
47if(v===''){
48return(
49                                <span key={i} ref={i} style={{display:'inline-block',width:'6px',height:'24px'}}> </span>
50                            )
51                        }else{
52return(
53                                <span key={i} ref={i}  style={{display:'inline-block',width:'6px',height:'24px'}}>{v}</span>
54                            )
55                        }
56
57                    })
58                }
59            </div>
60        )
61    }
62 }
你复制⼀下，就知道这个循环渲染⽂字加动画，还是不错滴！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。