UI动画是
网页设计和开发的重要组成部分。它们可以吸引注意力，引导用户的旅程，为交互提供令人满意且有意义的反馈，添加特色和天赋，使网站脱颖而出。共享元素转换API是一个改变游戏规则的特性，它将使我们能够轻松地创建令人印象深刻的精致的UI动画。
如果我们可以跳过所有这些，使用普通的JavaScript和CSS让优化的浏览器API完成所有繁重的工作正在…保持完全控制他们如何在不同的用户界面状态之间转换？有了新的共享元素转换API，实现这样的动画将变得非常容易和无缝。在本文中，我们将深入探讨这个改变游戏规则的API，它仍处于早期阶段，并通过以下方式探索其惊人的潜力构建四个有趣且令人兴奋的真实例子从零开始。
用户界面状态之间的动画通常需要当前和下一个要出现的状态同时。让我们以一个简单的图像轮播为例，它在图像之间交叉渐变。我们甚至会在稍后创建旋转木马。如果您只使用JavaScript而没有任何库或框架，您必须确保当前图像和下一个图像都存在，然后同时淡出当前图像和淡入下一个图像。您还必须处理一些边缘情况和由此可能出现的可访问性问题。
简而言之，共享元素转换API通过确保传出和传入状态都被看得见地 礼物同时。我们所要做的就是关注DOM更新和动画风格。该API还允许我们利用这些单独的状态，并使用标准CSS让我们完全控制动画animation属性。让我们从一个简单有趣的例子开始。我们将用下面的动画创建一个图片库-在卡片上点击，卡片内的图像将扩展并从它在网格中的位置移动到一个固定的覆盖图中。当点击覆盖图中的扩展图像时，它将返回到原来的位置。让我们看看如何用几行JavaScript和CSS创建这个动画。
如果操作正确，动画可以为任何项目注入活力并提供一个更令人愉快和难忘的经历给用户。随着即将推出的共享元素转换API，创建复杂的UI状态转换动画变得前所未有的简单，但我们仍然需要小心我们如何使用和实现动画。
这种简单性可能会导致不好的做法，例如没有正确使用动画，创建缓慢或重复的动画，创建不必要的复杂动画，等等。重要的是了解动画的最佳实践因此，我们可以有效地利用这个API来创建真正令人惊叹的和可访问的体验，或者如果我们不确定如何进行，甚至可以咨询设计师。
