React Transition Group -- Transition 组件

Airmusic 发布于2019-08-23 15:08 / 2090人阅读

摘要：安装官方提供三个组件，分别为。这一章主要介绍下组件。默认情况下，子组件在达到退出状态后仍然挂载。注意没有特定的显示状态。启用或禁用转换。注意如果提供超时，仍将其用作回退。

导语

新的一年，换了新的工作也算是新的开始吧，最近对页面的切换动画比较感兴趣，所以就以React Transition Group库为切入口做一些深入的理解吧。

安装

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

官方提供三个组件，分别为 Transition, CSSTransition, TransitonGroup。
这一章主要介绍下 Transition 组件。

Transition

Transition 组件允许您使用简单的声明性API描述从一个组件状态到另一个组件状态的转换。最常见的是，它用于动画组件的安装和卸载，但也可以用于描述就地的过渡状态。

默认情况下，转换组件不改变它呈现的组件的行为，它只跟踪组件的“进入”和“退出”状态。由你来赋予这些状态意义和效果。例如，我们可以在组件进入或退出时向其添加样式。

如前所述，转换组件本身不会对其子组件执行任何操作。它所做的是随时间跟踪转换状态，以便在组件更改状态时更新组件(例如通过添加样式或类)。

在一个过渡中有四种主要状态:

entering

entered

exiting

exited

过渡状态通过in属性切换。当为true时，组件开始“Enter”阶段。在此阶段中，组件将从当前转换状态转移到转换期间的“进入”状态，然后在完成转换后再转移到“进入”状态。

看完了基本介绍，下面来一个最基本的例子：

首先，创建我们的 Fade 组件

第一步：定义属性

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
    entering: { opacity: 0 },
    entered:  { opacity: 1 },
}

第二步：定义组件

const Fade = (props) => (
    
        {(state) => (
            
                {props.children}
            
        )}
    
)

Transition 组件的 in 属性是一个 boolean 值，由子组件传入，用于控制子组件的状态，是否显示。
我们的 Fade 组件创建好了，接下来就该试试好不好用了，我们创建一个新的组件，定义一些简单的样式，定义一个内部状态show，传入Fade 组件，然后使用 Fade 组件包裹它。

export default class App extends Component {

    state = {
        show: true
    }

    render () {
        const circle = {
            margin: 2,
            width: 100,
            height: 100,
            position: "absolute",
            display: "inline-block",
            left: 100,
            boxShadow: "0px 1px 2px #999",
            textShadow: "0px 1px 2px #999",
            lineHeight: "100px",
            textAlign: "center",
            color: "white",
            fontSize: 10,
        }
        return (
            
                this.setState(state=>({show: !state.show}))}>
                    Show
                
            
        )
    }
}

效果图：

Props

我们来看看 Trasition 组件的其它常用属性。

children

可以使用一个函数来代替 React 元素，通过调用这个函数与当前过渡状态(‘enter’、‘enter’、‘exit’、‘exited’、‘unmount’),可用于将特定于上下文的props应用于组件。

type: Function | element
required

用于显示组件;触发进入或退出状态

type: boolean
default: false

mountOnEnter

默认情况下，子组件与父转换组件一起立即挂载。如果你想“延迟挂载”第一个in={true}上的组件，你可以设置mountOnEnter。在第一次进入转换之后，组件将保持挂载状态，即使在“退出”状态下也是如此，除非你还指定unmountOnExit。

type: boolean
default: false

unmountOnExit

默认情况下，子组件在达到“退出”状态后仍然挂载。如果你希望在组件退出后卸载组件，请设置unmountOnExit。

type: boolean
default: false

appear

通常，如果组件挂载时显示组件，则该组件不进行转换。如果您希望在第一个挂载集上进行转换，则显示为true，并且组件将在< transition >挂载后立即进行转换。
注意:没有特定的“显示”状态。appear只添加一个额外的enter转换。

type: boolean
default: false

enter

启用或禁用enter转换。

type: boolean
default: true

exit

启用或禁用exit转换。

type: boolean
default: true

timeout

转换的持续时间，单位为毫秒。

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

type: number | { enter?: number, exit?: number }

addEndListener

添加自定义转换结束触发器。使用正在转换的DOM节点和done回调调用。允许更细粒度的转换结束逻辑。注意:如果提供超时，仍将其用作回退。

addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener("transitionend", done, false);
}}

type: Function

onEnter

在应用“输入”状态之前触发的回调。提供了一个额外的参数isAppearing，以指示是否在初始挂载上出现了enter阶段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onEntering

在应用“输入”状态之前触发的回调。提供了一个额外的参数isAppearing，以指示是否在初始挂载上出现了entering阶段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onEntered

在应用“输入”状态之前触发的回调。提供了一个额外的参数isAppearing，以指示是否在初始挂载上出现了entered阶段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onExit

在应用“退出”状态之前触发的回调。

type: Function(node: HtmlElement) -> void
default: function noop() {}

onExiting

在应用“退出”状态之后触发的回调。

type: Function(node: HtmlElement) -> void
default: function noop() {}

onExited

应用“退出”状态后触发的回调。

type: Function(node: HtmlElement) -> void
default: function noop() {}

GPU云服务器云服务器 -transition Transition CAMERA_TRANSITION_CO Group

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101562.html

让React应用“动”起来

摘要：因为其组件只是根据提供的及属性，生成动画的数据，业务应用中拿到生成的数据后根据需要添加需要动画的组件样式。除了上述简单的动画应用，在复杂动画的实现方面，表现非常优越。 WEB应用中动画很重要不管是web应用还是原生应用，也不论是PC端应用还是移动端应用，动画都扮演了一个重要的角色。尽管动画并不会添加应用的实际动能，但一个好的动画，一个流畅且优雅，选择在恰当时机出现的动画，能为应用增...

xiyang 2019-08-22 16:47 评论0 收藏0
react-transition-group动画库Transition组件使用

摘要：动画库这个库包括个组件，今天做项目刚好用到了组件，记录一下使用过程中的总结，另外两个组件用到了再做介绍。规定完成过渡效果需要多少秒或毫秒。规定速度效果的速度曲线。参考网址官方案例官网动画库的新写法 react-transition-group动画库这个库包括3个组件：Transition,CSSTransition,TransitonGroup，今天做项目刚好用到了Transitio...

charles_paul 2019-08-23 17:15 评论0 收藏0
react-transition-group动画库Transition组件使用

摘要：动画库这个库包括个组件，今天做项目刚好用到了组件，记录一下使用过程中的总结，另外两个组件用到了再做介绍。规定完成过渡效果需要多少秒或毫秒。规定速度效果的速度曲线。参考网址官方案例官网动画库的新写法 react-transition-group动画库这个库包括3个组件：Transition,CSSTransition,TransitonGroup，今天做项目刚好用到了Transitio...

gityuan 2019-08-29 18:45 评论0 收藏0
react 官网动画库（react-transition-group）的新写法

摘要：一一个官网提供的动画过度库。安装而官方提供的三个组建。下面来看一个例子效果是增加和删除列表项中的一个，产生渐入渐失的效果说白了也就是多个或者组合的效果。一、react-transition-group 一个官网提供的动画过度库。搜索了网上关于react动画的，很多的答案都是很久以前的了老版本了，而现在官方提供的是叫react-transition-group 它是以前两个的合体版本...

ky0ncheng 2019-08-22 18:30 评论0 收藏0
React Transition Group -- CSSTransition 组件

摘要：导语上一篇文章给大家简单演示了组件，今天给大家介绍一下的第二个组件组件。在组件淡入，进场出场时，组件应用了一系列名来对这些动作进行描述。在动画完成后，原改变为表明组件动画已经应用完成并加载完成。组件的回调函数，当组件或时会立即调用。导语上一篇文章给大家简单演示了 Transition组件，今天给大家介绍一下 React Transition Group 的第二个组件：CSSTran...

lbool 2019-08-23 15:09 评论0 收藏0