编写一个本机组件，对内容进行动画处理

Question

需要实现<ContentSwapper value={...}/>组件

要求： 每次父组件更改ContentSwapper组件上的“值”字段时，我们都会使用上述交换动画将新内容替换为旧内容。 检查下面的测试用例以了解要求。测试用例必须与循环中的任何数量的组件一起使用。 随时提出问题进行澄清。

<ContentSwapper value={content} />

示例测试：

const items = [ ‘USA’, ‘Canada’, ‘Mexico’ ];
export class SwappForever {
    state = { index: 0 }
    componentDidMount() {
        const dis = this;
        setInterval(() => { let index = dis.state.index + 1; if (index > 2) { index = 0 };  dis.setState({index}); }, 3000);
    }

    render() {
        return ( <ContentSwapper value={items[this.state.index] /> );
    }
}

必须使用动画交换内容。旧内容应向左滑动，然后消失，新内容应在其位置滑动。