我在React Native应用程序中有一个叠加视图,需要在用户按下按钮时将其动画显示或者隐藏。我知道如何定位视图并对其进行动画处理,但我无法想出如何触发动画。
我的Redux store状态非常简单,具有一个isOpen标志表示面板是打开还是关闭的。我将该状态映射到面板组件的props上,当isOpen prop更改时,我希望触发开启或关闭动画。显然,如果用户在动画运行期间按下切换按钮,则当前正在运行的动画需要被取消。
这应该很简单,但我找不到任何示例。任何帮助将不胜感激。
我在React Native应用程序中有一个叠加视图,需要在用户按下按钮时将其动画显示或者隐藏。我知道如何定位视图并对其进行动画处理,但我无法想出如何触发动画。
我的Redux store状态非常简单,具有一个isOpen标志表示面板是打开还是关闭的。我将该状态映射到面板组件的props上,当isOpen prop更改时,我希望触发开启或关闭动画。显然,如果用户在动画运行期间按下切换按钮,则当前正在运行的动画需要被取消。
这应该很简单,但我找不到任何示例。任何帮助将不胜感激。
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>