- 在项目中安装:yarn add react-transition-group
- 在要使用动画的页面 引入
- import { CSSTransition } from 'react-transition-group'
- 想让那个标签有动画效果就在那个标签外边用<CSSTransition>标签包裹就行了
- 标签的属性:
-
<CSSTransition in={props.focused} timeout={300} classNames="alert" > <NavSearch className = {props.focused ? 'focused':''} onFocus = {props.handleInputFocus} onBlur = {props.handleInputBlur} /> </CSSTransition>
timeout---动画时长
-
属性介绍
-
timeout---动画时长
-
in--用来控制入场和出场动画的
-
classNames --可以等于一个对象-或者字符串--动画的名字
-
&.alert-enter { transition: all .2s ease-out; } &.alert-enter-active { width:200px; } &.alert-exit { transition: all .2s ease-out; } &.alert-exit-active { width:120px; }
css的样式
-
-
-
react中使用 react-transition-group 实现动画效果
