React-spring Transition没有重复动画

时间:2019-06-03 13:26:33

标签: reactjs react-spring

在我的react应用程序中,我有组件,在其中我使用Transition中的react-spring

import { Transition } from 'react-spring'

export class myComponent {
 state = {
   items: []
 }

 static getDerivedStateFromProps(props, state){
    const newItems = [...props.items]

    if(props.items !== state.items){
      return {items: newItems}
    }
 }

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

        <Transition
        items={items}
        keys={item => items.id}
        initial={{ opacity: 1, height: 'auto' }}
        from={{ opacity: 0, height: 0 }}
        enter={{ opacity: 1, height: 'auto' }}
        leave={{ opacity: 0, height: 0 }}
      >
        {item => propsAnimations => (
          <section style={propsAnimations}>
            <Item
              key={item.selectionId}
            />
          </section>
        )}
      </Transition>
 }
}

但是当我更新this.state.items时,并没有重复动画。 当我更新items状态时,我只更改数组中的元素顺序。

0 个答案:

没有答案