React之过渡和动画效果

一:过渡效果

1:效果图


2:目录结构(利用官方脚手架进行删减)


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:效果图

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}
}


没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试