过度动画 Transition

通过使用 transition 给元素添加进入、离开的动画效果。

使用

API

安装使用

import { TiTransition } from '@titian-design/mobile-react';

用法示例

基本使用

演示

• App.jsx
• style.scss

code

codesanbox

copy

code

import React, { useState } from 'react';
import { TiButton, TiTransition } from 'titian-h5-react';
import './style.scss';

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <div className="code-container">
      <TiButton onClick={() => setShow(true)}>演示</TiButton>
      <TiTransition show={show} onEntered={() => setShow(false)}>
        <div className="transition-card" />
      </TiTransition>
    </div>
  );
}

codesanbox

copy

code

.transition-card {
  width: 40px;
  height: 40px;
  background-color: #fa2c19;
}

动画类型

fadefade downfade upfade leftfade rightslide downslide upslide leftslide rightzoom

• App.jsx
• style.scss

code

codesanbox

copy

code

import React, { useCallback, useState } from 'react';
import { TiButton, TiTransition, TransitionName } from 'titian-h5-react';
import './style.scss';

export default function App() {
  const [show, setShow] = useState(false);
  const [name, setName] = useState<TransitionName>('fade');

  const handle = useCallback((type: TransitionName) => {
    setShow(true);
    setName(type);
  }, []);

  return (
    <div className="code-container">
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <TiButton onClick={() => !show && handle('fade')}>fade</TiButton>
        <TiButton onClick={() => !show && handle('fade-down')}>fade down</TiButton>
        <TiButton onClick={() => !show && handle('fade-up')}>fade up</TiButton>
        <TiButton onClick={() => !show && handle('fade-left')}>fade left</TiButton>
        <TiButton onClick={() => !show && handle('fade-right')}>fade right</TiButton>
        <TiButton onClick={() => !show && handle('slide-down')}>slide down</TiButton>
        <TiButton onClick={() => !show && handle('slide-up')}>slide up</TiButton>
        <TiButton onClick={() => !show && handle('slide-left')}>slide left</TiButton>
        <TiButton onClick={() => !show && handle('slide-right')}>slide right</TiButton>
        <TiButton onClick={() => !show && handle('zoom')}>zoom</TiButton>
      </div>
      <TiTransition name={name} show={show} onEntered={() => setShow(false)}>
        <div className="transition-card" />
      </TiTransition>
    </div>
  );
}

codesanbox

copy

code

.transition-card {
  width: 40px;
  height: 40px;
  background-color: #fa2c19;
}

TiTransition API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
name	string	是	-	过渡动画类型	-
enterName	string	否	-	入场动画类型	-
exitName	string	否	-	出场动画类型	-
show	boolean	否	false	是否显示过渡动画	-
duration	number | object	否	-	过渡动画持续时间	-
destroyOnExit	boolean	否	false	出场后是否移除节点	-
timingFunction	string	否	-	动画加速度曲线	-

过渡动画类型

名称	说明	备注
fade	淡入淡出	-
fade-down	从下淡入淡出	-
fade-up	从上淡入淡出	-
fade-left	从左淡入淡出	-
fade-right	从右淡入淡出	-
slide-down	从下滑入滑出	-
slide-up	从上滑入滑出	-
slide-left	从左滑入滑出	-
slide-right	从右滑入滑出	-

事件 Events

名称	参数列表	描述	备注
onEnter	-	入场动画开始时触发	-
onEntering	-	入场动画进行中时触发	-
onEntered	-	入场动画结束时触发	-
onExit	-	出场动画开始时触发	-
onExiting	-	出场动画进行中时触发	-
onExited	-	出场动画结束时触发	-

插槽 Slots

名称	说明	备注
default	默认插槽	-

外部样式类 External Classes

名称	说明	备注
extClass	根节点可扩展的类名	-
enter	定义开始入场时的过渡状态。存在于 transition 节点被插入或者被展示的前一帧，之后会被删掉	-
enterActive	定义入场生效时的状态。在整个入场阶段中应用，在元素被插入之前生效，在过渡/动画完成之后会被移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。	-
enterDone	定义入场的结束状态。在元素被插入之后下一帧生效 (与此同时 enter 会被移除)，并在过渡/动画完成之后移除。	-
exit	定义出场开始状态。在触发出场状态时立刻生效，并在下一帧被移除。	-
exitActive	定义出场生效时的状态。在整个出场过渡的阶段中应用，在触发出场时立刻生效，在出场完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。	-
exitDone	定义出场的结束状态。在触发出场之后下一帧生效 (与此同时 exit 被删除)，并在出场完成之后移除。	-