reactjs - 如何在 React/Typescript 中使用用户点击事件实现类似堆栈的动画

Question

当Stack用户单击button.

在研究了几个库之后，我注意到React Spring可能是实现Stack组件和动画的好方法，但我没有使用过这个库，所以不确定这是否是最好的方法。

我目前有一个像下面这样带有可点击按钮的简单组件 - 实现Stack动画效果的最佳方法是什么？我正在使用 React/Typescript、ReactHooks 和 Tailwind CSS。

export const HomeLaunchShop: FC = () => {
    <div>
                    <form>
                        <div>
                            <a>This is first container</a>
                        </div>
                        <div>
                            <input
                                className={s.input}
                                name="phone"
                                type="tel"
                                maxLength={13}
                                value="xxx-xxxx-xxxx"
                                readOnly
                            />
                        </div>
                    </form>
                </div>
                <div>
                    <Button
                        title={'Try Payment'}
                        onClick={() => {}}
                    />
                </div>
            </div>
}

标签： reactjstypescripttailwind-cssreact-spring