使用react-transition-group

用react-transition-group 来在react中添加动画效果

原理

image.png

使用

安装

yarn add react-transition-group

简单使用方法：

在需要动画的地方 包裹一个 CSSTransition 标签
在组件出现、进入、退出或完成转换时应用于组件的动画 classNames。可以提供单个名称，该名称将为每个阶段添加后缀，例如classNames=”fade”适用：

  • fade-appear, fade-appear-active,fade-appear-done
  • fade-enter, fade-enter-active,fade-enter-done
  • fade-exit, fade-exit-active,fade-exit-done

    小案例

    ```jsx //header/index.jsx import { CSSTransition } from “react-transition-group”;//* handleInputFoucus(list)} onBlur={handleInputBlur} >

//style.js export const NavSearch = styled.input//... &.slide-enter { transition: all 0.2s ease-out; } &.slide-enter-active { width: 240px; } &.slide-exit { transition: all 0.2s ease-out; } &.slide-exit-active { width: 160px; } //... ``` 注意：这里是 classNames ,有s的 不然会把原来的 className 覆盖掉起不来效果

  • unmountOnExit：卸载