react中实现简单的动效

最新推荐文章于 2024-05-29 07:00:00 发布

木子石@

最新推荐文章于 2024-05-29 07:00:00 发布

阅读量598

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_44571638/article/details/107353525

版权

react 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

在react中如何实现一个简单的动效

需要使用一个插件：

npm install react-transition-group -s

//导入
import {Fragment} from 'react'
import {CSSTransition} from 'react-transition-group'

//需要实现动画效果的页面
<Fragment>
    <CSSTransition
        in={this.state.shows} // 如果this.state.show从false变为true，则动画入场，反之out出场
        timeout={1000} //动画执行1秒
        classNames='fade' //自定义的class名
        onEntered={() => {
            document.getElementById("loginForm").setAttribute("class", "loginAnimate");
            //可选，动画入场之后的回调，这里可以操作dom节点，如果想要动画效果只要进场，不要出场，可以在这里使用css中止动画效果
        }}
        // onExited={() => {
        //     document.getElementById("loginForm").setAttribute("class", "loginAnimate");
        //     //同理，动画出场之后的回调，也可以在这里来个setState啥的操作
        // }}
    >
        <div className="login" id='loginForm'>
            <div className="title">
                <div className="name">
                    欢迎使用BWM后台管理系统
                </div>
                <div className="description">
                    请登录
                </div>
            </div>
            <div className="loginForm">
                <form className="loginMsg">
                    <div className="loginLable">
                        <input placeholder="  手机号码" onChange={this.setTel.bind(this)} value={this.state.telephone}/>
                    </div>
                    <div className="loginLable">
                        <input type="password" placeholder="  密码" onChange={this.setPass.bind(this)} value={this.state.password}/>
                    </div>
                    <div className="loginLable">
                        <button className="Button buttonColor" type='button'
                                onClick={this.login.bind(this)}>登录
                        </button>
                        <button className="Button" type='button' onClick={this.resetForm.bind(this)}>重置</button>
                    </div>
                    <div className="loginButton"></div>
                </form>
            </div>
        </div>
    </CSSTransition>
</Fragment>

//需要实现的动画效果css
.fade-enter, .fade-appear {
    opacity: 0;
    margin: -250px 300px;
    transition: all 0.8s linear;
}

.fade-enter-active, .fade-appear-active {
    opacity: 0.5;
    margin: 0 300px;

}

.fade-enter-done {
    opacity: 1;
    margin: 0 300px;
}