如何在React Native中通过redux实现当props改变时启动动画？

Question

我在React Native应用程序中有一个叠加视图，需要在用户按下按钮时将其动画显示或者隐藏。我知道如何定位视图并对其进行动画处理，但我无法想出如何触发动画。

我的Redux store状态非常简单，具有一个isOpen标志表示面板是打开还是关闭的。我将该状态映射到面板组件的props上，当isOpen prop更改时，我希望触发开启或关闭动画。显然，如果用户在动画运行期间按下切换按钮，则当前正在运行的动画需要被取消。

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

- jonhobbs

Answer 1

React Native

为了在props变化时开始动画，您可以简单地在componentDidUpdate中启动动画。这是一个例子：

要开始动画，只需在组件的componentDidUpdate方法中调用start函数即可。

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

假设您的动画定义在组件的状态中。

React (浏览器):

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

使用CSS过渡的一种简单方法是将面板组件赋予一个closed的CSS类（或者open，但我发现使用关闭/折叠作为样式更容易，因为默认为打开）。

然后在您的面板的渲染中：

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

编辑：这种方法的缺点是在面板打开时必须明确设置高度。

这是一个小例子片段：

function togglePanel() {
  const panel = document.querySelector('div.panel');
  if (panel.classList.contains('closed')) {
    panel.classList.remove('closed');
  } else {
    panel.classList.add('closed');
  }
}

.panel {
  background-color: #00c0de;
  height: 4rem;
  overflow: hidden;
  transition: .5s ease-in;
}

.closed {
  height: 0;
}

<button onclick='togglePanel()'>Toggle Panel</button>

<div class='panel closed'>
  <span>Hello, I'm the panel</span>
</div>

- Henry Woody

---

抱歉，非常好的答案，但我应该在标题中注明它是在React Native中（这是一个标签）。抱歉。 - jonhobbs

哦，太好了。我对React还比较新，还没有真正使用过各种生命周期方法，但这完全有道理。 - jonhobbs