老莫的笔记本  
  
请选择 进入手机版 | 继续访问电脑版
查看: 794|回复: 0

React-transition-group react的动画模块

[复制链接]

662

主题

878

帖子

5115

积分

超级版主

Rank: 8Rank: 8

积分
5115
发表于 2020-8-13 09:29:55 | 显示全部楼层 |阅读模式
react-transition-group  react的动画模块
               
                1. 安装并引入,详细请百度
               
                2.使用
                <CSSTransition
                        in = {this.state.show}
                        timeout = {1000}
                        className='fade'
                        // 如果使用 unmountOnExit 则该demo 会被移除 或增加 不单单只是影藏
                        // 另外有许多钩子 可以用
                >
                        <div> 我爱钟无艳 </div>
                       
                </CSSTransition>
                                               
                原理:会在div 上添加 好多个class 从而实现动画效果
               
                这个fade 与ClassName 的 值一样
               
                .fade-enter{
                        入场动画的class
                }
                .fade-enter-active{
                       
                }       
                .fade-enter-done{
                        入场动画的结束class
                }
               
                .fade-exit{
                        出场动画的class
                }
                .fade-exit-active{
                       
                }       
                .fade-exit-done{
                        出场动画的结束class
                }

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表