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

Posted 2023-03-06

【中文标题】使用 React.js 为自定义轮播设置动画

【英文标题】：Animating a custom carousel with React.js

【发布时间】：2014-06-14 07:24:36

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你可以只在左边距使用 CSS3 过渡；唯一棘手的部分是当您走到最后并想要转到索引 0 时。

Mmmh...“结束”部分已经在我的代码中处理好了，所以它应该可以解决问题。谢谢！

您能否分享您的代码，以便其他人也可以从中受益..

它是封闭源代码，用于商业项目。但它可能会因为别的事情而被抛弃。如果是这种情况，我将毫无问题地分享它。敬请期待。

那么事情进展如何？还有更多信息吗？

【参考方案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。

【讨论】：

几个月后，我们需要一个更完整的轮播，我们很高兴切换到slick carousel。需要 jQuery，但非常值得。

在我提出问题时，该项目不存在。所以不，我从来没有看过它。快速浏览后，它看起来像是一个围绕 slick-carousel 的 React 包装器。

如果您需要图片库轮播，请查看github.com/xiaolin/react-image-gallery