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

Question

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

轮播组件是数据驱动的,这意味着它将其内容作为javascript对象数组传递.每张幻灯片都是a中的li标签ul,只需更改要从一张幻灯片移动到另一张幻灯片的margin-leftcss属性ul.

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

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

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

我看不出如何在这个旋转木马上添加动画.任何帮助/提示非常感谢.

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%'
};

不要过多地看待公式,这是一个实现细节.

进一步说明,我们的轮播是"无限的",这意味着过渡总是单向 - 从左到右 - 即使在第一个或最后一个元素上.这只是"玩"内容数组索引的问题.这部分比旋转木马本身有点难.

旁注(甚至是巨魔):即使是困难的部分也更好,因为它是纯粹的算法与数据做棘手和cabalistic直接DOM操作.没有更多的jQuery这个东西,甚至我们的网站的其余部分.