前一段时间我想出了如何将滑动效果应用于React组件,但它不是exactly相同的行为,但您可能会发现我的代码和描述很有用。请参阅我对另一个相关问题的回答:https://stackoverflow.com/a/48743317/1216245 [编辑:此后已删除,所以我将说明粘贴在下面。]
博客文章在这里:http://blog.lunarlogic.io/2018/slidedown-menu-in-react/。随意窃取代码的任何部分。
以下是该解决方案最重要部分的简短描述。
至于 React/JSX 部分,您可以将要滑动的组件包装在 CSSTransitionGroup 中。 (您可以在此处阅读有关此 React 插件的更多信息:https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup和这里:https://reactcommunity.org/react-transition-group/.)
<div className="component-container">
<CSSTransitionGroup
transitionName="slide"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
{ this.state.showComponent && <Component /> }
</CSSTransitionGroup>
</div>
请注意,它全部包装在一个容器中,您需要该容器才能使动画按您希望的方式工作。
这是我用于幻灯片动画效果的 CSS:
/*
Slide animation styles.
You may need to add vendor prefixes for transform depending on your desired browser support.
*/
.slide-enter {
transform: translateY(-100%);
transition: .3s cubic-bezier(0, 1, 0.5, 1);
&.slide-enter-active {
transform: translateY(0%);
}
}
.slide-leave {
transform: translateY(0%);
transition: .3s ease-in-out;
&.slide-leave-active {
transform: translateY(-100%);
}
}
/*
CSS for the submenu container needed to adjust the behavior to our needs.
Try commenting out this part to see how the animation looks without the container involved.
*/
.component-container {
height: $component-height; // set to the width of your component or a higher approximation if it's not fixed
min-width: $component-width; // set to the width of your component or a higher approximation if it's not fixed
}
如需完整示例和演示,请查看http://blog.lunarlogic.io/2018/slidedown-menu-in-react/.