react中使用 react-transition-group 实现动画效果

React Transition Group动画使用方法

最新推荐文章于 2023-02-06 23:03:29 发布

原创最新推荐文章于 2023-02-06 23:03:29 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在项目中使用React Transition Group实现动画的方法。首先通过yarn add react-transition-group进行安装，然后在页面引入CSSTransition组件，用其包裹需添加动画的标签。还介绍了标签的属性，如timeout控制动画时长、in控制入场出场、classNames指定动画名字。

在项目中安装：yarn add react-transition-group
在要使用动画的页面引入
1. 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的样式