我的 React Native 应用程序中有一个覆盖视图,当用户按下按钮时,我需要在屏幕上和屏幕外设置动画。我知道如何定位视图并为其设置动画,但我不知道如何触发动画。
我的 redux 商店有一个非常简单的状态,带有一个 isOpen 标志,表示面板是打开还是关闭。我将状态映射到面板组件的道具,当 isOpen 道具发生变化时,我想触发打开或关闭动画。显然,如果用户在动画中间按下切换按钮,则需要取消当前正在运行的动画。
这应该很简单,但我找不到任何例子。任何帮助将非常感激。
我的 React Native 应用程序中有一个覆盖视图,当用户按下按钮时,我需要在屏幕上和屏幕外设置动画。我知道如何定位视图并为其设置动画,但我不知道如何触发动画。
我的 redux 商店有一个非常简单的状态,带有一个 isOpen 标志,表示面板是打开还是关闭。我将状态映射到面板组件的道具,当 isOpen 道具发生变化时,我想触发打开或关闭动画。显然,如果用户在动画中间按下切换按钮,则需要取消当前正在运行的动画。
这应该很简单,但我找不到任何例子。任何帮助将非常感激。
反应原生
要开始一个动画,props
你可以简单地改变start
你的动画componentDidUpdate
。这是一个例子:
componentDidUpdate(prevProps) {
if (this.props.isOpen !== prevProps.isOpen) {
this.state.animation.start();
}
}
假设您的动画是在组件的状态中定义的。
反应(浏览器):
[与这个问题无关,但可能有用。]
一个简单的方法是使用 CSS 过渡。你可以做的是给面板组件一个 CSS 类closed
(或者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>