目 录CONTENT

文章目录

react-transition-group动画使用

Administrator
2021-04-07 / 0 评论 / 0 点赞 / 5777 阅读 / 5013 字 / 正在检测是否收录...

react-transition-group动画组件

react-transition-group 一个官网提供的动画过度库,css动画的方式,比较局限,涉及到一些js动画的时候没法处理了,借住这个react-transition-group模块可以更方便的实现更加复杂的动画效果,而官方提供的三个组建(Transition,CSSTransition,TransitonGroup)。

安装 react-transition-group

$ npm install react-transition-group --save

CDN/外部

<script src="Https://unpkg.com/react-transition-group/dist/react-transition-group.js"></script>

官方提供组件

组件说明
Transition过渡组件
CSSTransition动画进入出入组件
SwitchTransition动画却换组件
TransitionGroup列表动画组件

CSSTransition 的使用

index.js代码

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css';

function Example() {
  const [showMessage, setShowMessage] = useState(false);
  return (
    <div>
      <button
        onClick={() => setShowMessage(true)}
        size="lg"
      >
        Show Message
      </button>
      <CSSTransition
        in={showMessage}
        timeout={300}
        classNames="alert"
        unmountOnExit
      >
        <div style={{border:"1px solid black",backgroundColor:"red"}}>
          <p>
           这是标哥显示的消息
          </p>
          <button onClick={() => setShowMessage(false)}>
            return
          </button>
        </div>
      </CSSTransition>
    </div>
  );
}

timeout 属性可以指定对应值的动画时间

timeout={{
 enter: 300,
 exit: 500,
}}

index.css 文件

划入划出效果样式

.alert-enter {
  opacity: 0;
  transform: translateX(100%);;
}
.alert-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.alert-exit {
  opacity: 1;
  transform: translateX(0);
}
.alert-exit-active {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 300ms, transform 300ms;
}

放大与缩小的效果

.alert-enter {
  opacity: 0;
  transform: scale(0.9);
}
.alert-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.alert-exit {
  opacity: 1;
}
.alert-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

API

CSSTransition 组件属性

组件属性说明
in动画状态
timeout动画执行时间
classNamescss动画名称
mountOnEnter默认情况下,子组件与父转换组件一起立即挂载。如果你想“延迟挂载”第一个in=上的组件,你可以设置mountOnEnter。在第一次进入转换之后,组件将保持挂载状态,即使在“退出”状态下也是如此,除非你还指定unmountOnExit
unmountOnExit默认情况下,子组件在达到“退出”状态后仍然挂载。如果你希望在组件退出后卸载组件,请设置unmountOnExit
appear如果组件挂载时显示组件,则该组件不进行转换。如果您希望在第一个挂载集上进行转换,则显示为true,并且组件将在< transition >挂载后立即进行转换,注意:没有特定的“显示”状态。appear只添加一个额外的enter转换
enter启用或禁用enter转换
exit启用或禁用exit转换
addEndListener添加自定义转换结束触发器。使用正在转换的DOM节点和done回调调用。允许更细粒度的转换结束逻辑。注意:如果提供超时,仍将其用作回退
onEnter在应用‘Enter’或‘出现’类后立即触发回调
onEntering在应用‘Enter-Active’或‘出现-活动’类后立即触发回调
onEntered在“Enter”或“出现”类之后立即触发回调移除而done类添加到DOM节点
onExit在应用“Exit”类后立即触发回调
onExiting在应用“Exit-Active”之后立即触发回调
onExited在“退出”类之后立即触发回调。移除而exit-done类添加到DOM节点

css动画属性

动画属性说明
.xxx-enter入场前加载动画
.xxx-enter-active入场后到入场结束的过程
.xxx-enter-done入场动画执行完毕后
.xxx-exit出场前加载动画
.xxx-exit-active出场后到入场结束的过程
.xxx-exit-done出场动画执行完毕后

总体来说,CSS当中的代码与之前vue中的<transition>的css相同,分别列举如下

  1. 进入之前
  2. 进入之后
  3. 离开之前
  4. 离开之后
  5. 进入的过程
  6. 离开的过程
0

评论区