Question

此处https://react.semantic-ui.com/modules/transition/#types-group中显示的语义的Transition.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属性标识一个元素并防止不必要地重新渲染子元素，因为尽管它是一个新数组，对象引用仍将相同。但我建议为key道具使用更可识别且唯一的值，例如ID或子弹。

通过这种方式，您将不必在使用代码的任何地方使用reverse来重新计算数组。

语义UI React Transition Group动画第一个元素

2 个答案: