使用React.js制作自定义旋转木马的动画

Animating a custom carousel with React.js

本文关键字：旋转木马 动画 自定义 React js 使用      更新时间：2023-09-26

我用React.js创建了一个旋转木马，它很简单，直到我遇到动画问题。转盘是经典的，它由内容的"幻灯片"、指示当前幻灯片的小项目符号以及用于在幻灯片之间导航的小缩略图组成。

carousel组件是数据驱动的，这意味着它以对象的javascript数组的形式传递内容。每张幻灯片都是ul中的li标签，只需更改ul的margin-left-css属性即可从一张幻灯片移动到另一张幻灯片。

我想知道是应该使用ReactTransitionGroup还是ReactCSSTransitionGroup来设置从一张幻灯片到另一张幻灯片的转换动画。基本上，从一张幻灯片到另一张幻灯片时，过渡是从左到右的滑动效果。

我的理解是ReactTransitionGroup的API在添加或删除某些内容时很有帮助。在这里，我不会添加/删除任何幻灯片，而是通过动画更改可见幻灯片。

我很难理解这一点，因为我开发了一个静态（也就是没有动画的）旋转木马，其中当前显示的幻灯片是组件中保存的唯一状态。此状态只是幻灯片阵列中幻灯片的索引。因此，当我单击缩略图浏览幻灯片编号n时，我所做的唯一事情就是更新这个内部状态，然后渲染会根据这个索引设置left样式的属性。

我不知道如何将动画添加到这个旋转木马中。非常感谢任何帮助/提示。

答案相当简单，不需要使用ReactTransitionGroup或ReactCSSTransitionGroup。我只是在css3转换中使用了内联css。

在render函数中，我们动态地计算左属性。由于我们的幻灯片都有相同的固定宽度，因此幻灯片以内联方式显示，并且由于父元素上的overflow: hidden，只有一张幻灯片可见。我们的动态类代码如下所示：

var styles = {
    position: "absolute",
    top: 0,
    left: IMG_WIDTH * (this.props.idx - this.props.activeIdx),
    zIndex: 100,
    transition: 'left 1s',
    width: '100%'
};

不要过多地看公式，它是一个实现细节。

进一步注意，我们的旋转木马是"无限的"，这意味着即使在第一个或最后一个元素上，转换也总是从左向右进行。这"只是"一个玩内容数组索引的问题。这个部分比旋转木马本身有点难。

附带说明（甚至是troll）：即使是困难的部分也比做棘手和阴谋论的直接DOM操作要好，因为它是纯数据算法。不再为这些东西提供jQuery，甚至为我们网站的其他部分提供jQuery。

相关文章：