反应组件滑入/滑出

时间:2018-11-20 11:13:37

标签: css reactjs animation css-animations

我正在尝试编写类似于此处图像的滑动菜单:https://chustynka.pl/

我已经有了随时间变化的组件(带有箭头),剩下的只有动画。我添加了有用的类和ID,但我不知道如何使用CSS为其设置动画。你能帮忙吗?

https://codesandbox.io/s/00rnj29p60

1 个答案:

答案 0 :(得分:1)

不幸的是,这不仅仅是您需要的CSS代码。当您要对幻灯片进行动画处理时,还必须执行一些其他的JavaScript代码。例如,您必须跟踪幻灯片的方向。那就是如果您按下向左或向右箭头。反过来,这将决定幻灯片向内/向外滑动的方向。

有很多方法可以做到这一点,但是它涉及到JS中更多的编码。 =)

这不是我在这里制作的React滑块,但是您可以从Github下载/克隆它,并查看它的脚本。也许它将使您对必须执行的操作有所了解。

https://github.com/weibenfalk/Slider-Carousel---Lightweight-in-Vanilla-JS-ES6-