使用 React.js 为自定义轮播设置动画

Question

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

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

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

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

我的困难在于我开发了一个静态（也就是没有动画）轮播，其中当前显示的幻灯片是组件中保存的唯一状态。这个状态只是幻灯片数组中幻灯片的索引。因此，当我单击缩略图导航幻灯片编号 n 时，我唯一要做的就是更新此内部状态，然后渲染会根据此索引设置 left 样式属性。

我不知道如何为这个轮播添加动画。非常感谢任何帮助/提示。

Answer 1

答案相当简单，无需使用ReactTransitionGroup 或ReactCSSTransitionGroup。我只是将内联 css 与 css3 转换一起使用。

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

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

公式不要看太多，是实现细节。

进一步说明，我们的轮播是“无限的”，这意味着过渡总是以一种方式进行 - 从左到右 - 即使在第一个或最后一个元素上也是如此。这“只是”玩弄内容数组的索引。这部分比轮播本身要难一些。

旁注（甚至是巨魔）：即使是最困难的部分也比进行棘手和神秘的直接 DOM 操作更好，因为它是带有数据的纯算法。这些东西不再使用 jQuery，甚至我们网站的其他部分也不再使用 jQuery。