Семантический пользовательский интерфейс 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 более идентифицируемое и уникальное значение, например, Идентификаторы или слизни.

Также таким образом вам не придется пересчитывать массив, используя reverse везде, где вы его используете, только в одной точке вашего кода.