Question

我用React.js创建了一个旋转木马，直到我遇到动画问题才很简单。旋转木马是经典的，它由＆＃34;幻灯片组成。内容，指示当前幻灯片的小子弹，以及用于在幻灯片之间导航的小缩略图。

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

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

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

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

我不知道如何为这个旋转木马添加动画。任何帮助/提示都非常感激。

Answer 1

答案很简单，无需使用ReactTransitionGroup或ReactCSSTransitionGroup。我只是使用带有css3过渡的内联css。

在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的东西，甚至我们网站的其余部分。

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

1 个答案: