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

Question

此处显示的语义 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 属性标识一个元素并防止不必要地重新呈现子元素，因为尽管它是一个新数组，对象引用仍然相同。但我建议为 key 属性使用一个更易于识别和唯一的值，例如ID' 或 slug。

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

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

Semantic UI React Transition Group animate first element

javascript

animation

reactjs

semantic-ui-react