Semantic UI React Transition Group 为第一个元素设置动画答案

【问题标题】：Semantic UI React Transition Group animate first elementSemantic UI React Transition Group 为第一个元素设置动画
【发布时间】：2019-09-20 10:00:57
【问题描述】：

此处显示的语义的 Transition.Group 示例https://react.semantic-ui.com/modules/transition/#types-group 仅对最底部的元素进行动画处理。我将如何更改它以使最上面的元素变为动画。

如果我在上面的示例中按下加法或减法按钮，动画仅适用于列表中的最后一个元素，我如何让它只为最顶部的元素设置动画。或者本质上使选择器与默认值相反，使其从上到下

【问题讨论】：

标签： javascript reactjs animation semantic-ui-react

【解决方案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) })

【讨论】：

如果我认为这是正确的，您的建议将在每次更改时更改数组中元素的顺序，而不是保留它们被添加的顺序。
不，不会，请注意，对于handleAdd，items 被分配了来自users（原始数组）的新值，而不是当前状态值。对于 handleRemove，它只是从当前状态中删除顶部值。您可以在 OP 引用的页面上试用。
我忽略了语义 UI 示例中对 users 数组的引用。我的错。

【解决方案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 重新计算数组，只需在代码中的某一点。

【讨论】：