语义UI反应过渡组为第一个元素设置动画

Question

这里显示的Semantic的Transition.Group示例https://react.semantic-ui.com/modules/transition/#types-group仅动画最底部的元素。我如何更改它，以便最顶层的元素获得动画。

如果我在上面的示例中按下“添加”或“减去”按钮，则动画仅适用于列表中的最后一个元素，如何使其仅为最顶层元素设置动画。或者基本上使选择器与默认值相反，因此它从上到下

Answer 1

如果您阅读示例代码，您会发现它所做的只是根据状态中的当前长度显示数组的切片。它似乎是从底部追加/删除，因为它从索引0开始采用元素。如果你想要将它显示为顶部的动画，你只需要从最后一个元素开始。例如，您可以使用reverse执行此操作：

#8      state = { items: users.slice(0, 3).reverse() }

#10     handleAdd = () => this.setState({ items: users.slice(0, this.state.items.length + 1).reverse() })

#12      handleRemove = () => this.setState({ items: this.state.items.slice(1) })

Answer 2

使用reverse更简单的解决方案是在映射并创建子项时反转数组。

render() {
    const { items } = this.state;

    return (<div>
        {items.clone().reverse().map((item, index) => <div key={item}>
            { /* Stuff */ }
        </div>)}
    </div>);
}

是的，它会在每次调用render时创建一个新数组，但是key prop会识别一个元素并防止对子元素进行不必要的重新渲染，因为尽管它是一个新数组，但对象引用仍然是相同的。但我建议为key道具使用更可识别和唯一的值，例如： ID'或slugs。

另外，这样您就不必在使用它的任何地方使用reverse重新计算数组，只需在代码中的某一点。