Anime.js 如何动画元素过渡到页面中心？答案

【问题标题】：Anime.js How to animate the transition of an element to the center of the page?Anime.js 如何动画元素过渡到页面中心？
【发布时间】：2021-06-06 22:28:46
【问题描述】：

有一个元素，当页面加载时，应该从屏幕左侧平滑地移动到中心，这取决于设备的分辨率。 TranslateX 参数：0，不接受百分比。这需要在 Anime.js 插件上精确实现。

【问题讨论】：

嗨，朱丽叶，欢迎来到 SO。请编辑您的问题并包含与该问题相关的代码。如果可能，请创建一个minimal, reproducible example 供我们使用。关于你的问题；虽然您不能使用百分比，但您可以计算动画的距离。像window.innerWidth / 2 这样的东西会给你屏幕的中心。这取决于元素的尺寸，也可能是动画的转换值。

标签： javascript css anime.js

【解决方案1】：

您可以简单地使用 CSS 中的过渡属性来完成，例如：

.example {
  transform: ....;
  transition: transform 1s ease-in-out;
}

这是一个简单的用例，但您必须将其调整为现有代码，因为您没有发布任何内容让我将其放入。

【讨论】：