当React Native中的道具发生更改（通过redux）时，如何启动动画？

Question

我的React Native应用程序中有一个叠加视图，当用户按下按钮时，需要在屏幕上和屏幕外制作动画。我知道如何放置视图并为其设置动画，但是我不知道如何触发动画。

我的redux存储具有一个非常简单的状态，带有一个isOpen标志，用于指示面板是打开还是关闭。我将状态映射到面板组件的道具，当isOpen道具更改时，我想触发打开或关闭动画。显然，如果用户在动画中间按下切换按钮，则需要取消当前运行的动画。

这应该很简单，但我找不到任何示例。任何帮助将非常感激。

Answer 1

反应本机

要开始更改动画，props只需start在中添加动画即可componentDidUpdate。这是一个例子：

componentDidUpdate(prevProps) {
    if (this.props.isOpen !== prevProps.isOpen) {
        this.state.animation.start();
    }
}

假设动画是在组件的状态下定义的。

React（浏览器）：

[与此问题无关，但可能有用。]

一种简单的方法是使用CSS过渡。您可以做的是为面板组件提供一个CSS类closed（或者，open但是我发现使用close / collapse作为样式更容易，因为默认是打开的）。

然后在面板的渲染中：

render() {
    const { isOpen } = this.props;

    return <div className={ 'panel' + (isOpen ? '' : ' closed') }></div>
}

在您的CSS中：

.panel {
    /* some other styles */
    transition: .5s ease-in;
}

.closed {
    height: 0;
}

这样CSS可以处理动画逻辑，并且解决了您在当前动画完成之前单击“打开/关闭”按钮的问题。

以下是CSS过渡文档：https : //developer.mozilla.org/en-US/docs/Web/CSS/transition

编辑：此方法的缺点是打开面板时必须显式设置高度。

这是一个小片段示例：

componentDidUpdate(prevProps) {
    if (this.props.isOpen !== prevProps.isOpen) {
        this.state.animation.start();
    }
}

render() {
    const { isOpen } = this.props;

    return <div className={ 'panel' + (isOpen ? '' : ' closed') }></div>
}

.panel {
    /* some other styles */
    transition: .5s ease-in;
}

.closed {
    height: 0;
}