React之过渡和动画效果

一：过渡效果

1：效果图

2：目录结构（利用官方脚手架进行删减）

3：index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';


ReactDOM.render(, document.getElementById('root'));

4：App.js

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

import './style.css';//引入样式


class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show:true,

        }
    }

    render() {
        return (
            {/*一个占位符，只是为了包裹,不渲染*/}
                

                    
className={this.state.show?'show':'hide'}>HELLO
                
                onClick={this.handleToggle}>toggle

            

        );
    }
    handleToggle=()=>{
        this.setState({
            show:this.state.show? false:true,
        })
    }
}

export default App;

5: style.css

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

二：动画效果

1：效果图

2：style.css（其它文件保持不变）

.show{
    opacity: 1;
    transition: all 1s ease-in ;
}
.hide{
    animation: hide-item 2s ease-in forwards;/*调用动画，forwards作用：使动画停留在最后的100%*/
}
/*//定义一个动画*/
@keyframes hide-item {
    0% {opacity: 1;color:red}
    50% {opacity: 0.5;color:blue}
    100% {opacity: 0;color:green}
}