reactjs - 为什么 css3 动画在 React 中不能正常工作？

Question

在 React 中，我有一个名为 componentDidMount 的生命周期方法。在该方法中，我调用了一个名为 change 的函数。函数 change 有一个 setState 将属性 classAnimation 值从 '' 更改为 'testing2 animate'。在我的 animations.js 文件中，我有一个名为 home 的组件，在该组件内，我为 className 分配了一个名为 props.testing 的属性值。

由于某种原因，当我应用 .testing2 和 .animate 类时，组件内部的文本应该从左向右移动，但事实并非如此。

帮助会很好。

APP.JS

import React, { Component } from 'react';
import './App.css';
import Animations from './components/animations';


class App extends Component {

  constructor(props){
    super(props);

    this.state = {
      classAnimation: '' 
    };

}


change = () => {
    this.setState({
      classAnimation: 'testing2 animate'
    });
}




componentDidMount(){
    window.addEventListener('scroll', this.myFunction)
    this.change()
}

componentWillUnmount(){
    window.removeEventListener('scroll', this.myFunction)
}


  render() {
    return (
      <div className="App">
        <Animations testing={this.state.classAnimation}/>

      </div>
    );
  }
}

export default App;

动画.JS

import React from 'react';

const Home = (props) => {

return(
    <div>
        <div className="wrapper">
            <div className="curriculum">
                <div className={props.testing}>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
           </div>     

        </div>
    </div>
    );
};

export default Home;    

应用程序.CSS

body{
  height:1500px;
}


.curriculum{
    max-width:700px;
    padding:20px;
    margin: 0 auto;
    border:2px solid black; 
}

/*---------- animation -----------------*/


@-webkit-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@-moz-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }


.animate {

    -webkit-transition: 2s ease-in-out;
    transition: 2s ease-in-out;

    -moz-animation: fadeIn ease-in 1;
    -webkit-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;


    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -animation-duration: 1s;

}

.testing2.animate{
    color:red;
    -webkit-transform: translate(3em,0);
    -moz-transform: translate(3em,0);
    transform: translate(3em,0);
 }

这就是我得到的： Lorem ipsum dolor sit amet，consectetur adipiscing elit 文本，将颜色变为红色并在动画中褪色。

这就是我想要的： Lorem ipsum dolor sit amet，consectetur adipiscing elit 文字，颜色变为红色，动画淡化，从左到右移动。

标签： reactjs