React 中实现CSS过渡动画 与 动画效果

我们先在项目的src目录下，新建一个文件App.js ,代码如下。

import React, { Component, Fragment } from 'react'

class App extends Component {
  render() {
    return (
      <Fragment>
        <div>hello</div>
        <button>toggle</button>
      </Fragment>
    )
  }
}

export default App;

然后再修改src 目录下的index.js 文件如下。

import React from 'react';
import ReactDOM from 'react-dom';
// import TodoList from './TodoList';
import App from './App'

import './style.css'

ReactDOM.render(<App />, document.getElementById('root'));

好了，然后我们再来更改App.js 中代码添加样式。下面我们通过点击按钮就修改了文字的class 。

import React, { Component, Fragment } from 'react'

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: true
    }
    this.handleToggle = this.handleToggle.bind(this)
  }

  render() {
    return (
      <Fragment>
        <div className={this.state.show ? 'show' : 'hide'}>hello</div>
        <button onClick={this.handleToggle}>toggle</button>
      </Fragment>
    )
  }

  handleToggle() {
    this.setState({
      show: this.state.show ? false : true
    })
  }
}

export default App;

然后我们在src下创建一个style.css 文件。

先在App.js 中引入这个文件

import './style.css'

然后在style.css中，使用CSS3 特性添加过渡的效果。如下。

.show {
  opacity: 1;
  transition: all 1s ease-in;
}
.hide {
  opacity: 0;
  transition: all 1s ease-in;
}

 

下面我们使用CSS3 中的动画效果来显示隐藏div，即使用 keyframes。如下。

.show {
  animation: show-item 2s ease-in forwards;
}
.hide {
  animation: hide-item 2s ease-in forwards;
}
@keyframes show-item {
  0% {
    opacity: 0;
    color: red;
  }
  50% {
    opacity: 0.5;
    color: green;
  }
  100% {
    opacity: 1;
    color: blue;
  }
}
@keyframes hide-item {
  0% {
    opacity: 1;
    color: red;
  }
  50% {
    opacity: 0.5;
    color: green;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}