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

React Transition Group动画使用方法
本文介绍了在项目中使用React Transition Group实现动画的方法。首先通过yarn add react-transition-group进行安装,然后在页面引入CSSTransition组件,用其包裹需添加动画的标签。还介绍了标签的属性,如timeout控制动画时长、in控制入场出场、classNames指定动画名字。
  1. 在项目中安装:yarn add react-transition-group
  2. 在要使用动画的页面 引入
    1. import { CSSTransition } from 'react-transition-group'
  3. 想让那个标签有动画效果就在那个标签外边用<CSSTransition>标签包裹就行了
  4. 标签的属性:
    1.        
      <CSSTransition
          in={props.focused} 
          timeout={300}
          classNames="alert"
      >
      <NavSearch 
          className = {props.focused ? 'focused':''}
          onFocus = {props.handleInputFocus}
          onBlur = {props.handleInputBlur}
      />
      </CSSTransition>

      timeout---动画时长

    2. 属性介绍

      1. timeout---动画时长

      2. in--用来控制入场和出场动画的

      3. classNames --可以等于一个对象-或者字符串--动画的名字

        1. &.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的样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值