私の反応アプリには、Transition
fromを使用するコンポーネントがあります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
、配列内の要素の順序のみを変更します。