javascript 使用 React.js 为自定义轮播设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23346327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animating a custom carousel with React.js
提问by DjebbZ
I created a carousel with React.js, it was simple until I arrived at the animation problem. The carousel is classic, it is composed of "slides" of content, of small bullets indicating the current slide, and of small thumbnails for navigating between the slide.
我用 React.js 创建了一个轮播，这很简单，直到我遇到了动画问题。轮播是经典的，它由内容“幻灯片”、指示当前幻灯片的小项目符号和用于在幻灯片之间导航的小缩略图组成。
The carousel component is data-driven, meaning that it is passed its content as a javascript array of objects. Each slide is a litag within a ul, and just have to change the margin-leftcss property of the ulto move from one slide to another.
carousel 组件是数据驱动的，这意味着它将其内容作为 javascript 对象数组传递。每张幻灯片都是 中的一个li标签ul，只需更改 的margin-leftcss 属性ul即可从一张幻灯片移动到另一张幻灯片。
I'm wondering if I should use the ReactTransitionGroupor ReactCSSTransitionGroupto animate the transition from one slide to another. Basically the transition is a sliding effect from left to right when going from one slide to another.
我想知道是否应该使用ReactTransitionGroup或ReactCSSTransitionGroup来动画从一张幻灯片到另一张幻灯片的过渡。基本上，当从一张幻灯片转到另一张幻灯片时，过渡是从左到右的滑动效果。
My understanding is that the ReactTransitionGroups API is helpful when adding or removing some content. Here I won't add/remove any slide, change changing the visible one with an animation.
我的理解是ReactTransitionGroups API 在添加或删除某些内容时很有帮助。在这里，我不会添加/删除任何幻灯片，而是通过动画更改可见的幻灯片。
My difficulty wrapping my head around this is that I developped a static (aka without animation) carousel where the currently displayed slide is the only state saved in the component. This state is just the index of the slide in the array of slides. So when I click a thumbnail to navigate slide number n, the only thing I do is updating this internal state, then the rendering takes care of setting the leftstyle property based on this index.
我的难点在于我开发了一个静态（也就是没有动画）轮播，其中当前显示的幻灯片是组件中保存的唯一状态。此状态只是幻灯片数组中幻灯片的索引。因此，当我单击缩略图来导航幻灯片编号时n，我唯一要做的就是更新此内部状态，然后渲染会left根据此索引设置样式属性。
I don't see how I can add animation to this carousel. Any help/hint greatly appreciated.
我不知道如何向这个轮播添加动画。非常感谢任何帮助/提示。
回答by DjebbZ
The answer was fairly simple, no need to use ReactTransitionGroupor ReactCSSTransitionGroup. I simply used inline css with css3 transitions.
答案相当简单，无需使用ReactTransitionGroup或ReactCSSTransitionGroup。我只是使用带有 css3 转换的内联 css。
In the renderfunction, we dynamically calculate the left property. As our slides all have the same fixed width, the slides are displayed inline and only one slide is made visible thanks to overflow: hiddenon the parent element. Our dynamic class code looked like this :
在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%'
};
Don't look at the formula too much, it's an implementation detail.
不要看太多公式，这是一个实现细节。
Further note, our carousel is "infinite", meaning that the transition always go one way - from left to right - even when on the first or last element. It was "just" a matter of playing with the indices of the array of content. This part was a bit harder than the carousel itself.
进一步注意，我们的轮播是“无限的”，这意味着过渡总是单向的——从左到右——即使是在第一个或最后一个元素上。这“只是”玩弄内容数组的索引的问题。这部分比旋转木马本身要难一些。
Side note (even troll) : even the hard part was better that doing tricky and cabalistic direct DOM manipulation since it was pure algorithms with data. No more jQuery for this stuff, and even for the rest of our website.
旁注（甚至是巨魔）：即使是最困难的部分也比做棘手和神秘的直接 DOM 操作要好，因为它是带有数据的纯算法。不再有 jQuery 用于这些东西，甚至是我们网站的其余部分。
