React之过渡和动画效果

逃离我推掉我的手 2022-05-21 12:53 233阅读 0赞

# 一：过渡效果 #

##### 1：效果图 #####

![70][]

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

![70 1][]

##### 3：index.js #####

import React from 'react';
    import ReactDOM from 'react-dom';
    
    import App from './App';
    
    
    ReactDOM.render(<App />, 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 (
                <Fragment>{
      /*一个占位符，只是为了包裹,不渲染*/}
                    <div>
                        <h1 className={
      this.state.show?'show':'hide'}>HELLO</h1>
                    </div>
                    <button onClick={
      this.handleToggle}>toggle</button>
    
                </Fragment>
    
            );
        }
        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：效果图 #####

##### ![70 2][]   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}
    }

[70]: /images/20220521/5ce37d279b85490d91258451e65ffb49.png
[70 1]: /images/20220521/53e9456242b44cbdb9c54a7b41d6f5d9.png
[70 2]: /images/20220521/fd3944ab51324a2ca6ed773233e98bf1.png