使用Anime.js实现标题缩小时logo同步居中的动画效果如何实现？

问题原因 #

CSS transform 属性属于合成层动画，不会触发页面重排（reflow），因此#title_container虽然视觉上缩放到0，但它原本占据的布局空间仍会保留，父容器宽度不会变化，所以#logo的位置不会自动移动。

方案1：同步添加位移动画（无需修改CSS/HTML） #

直接在同一个Anime时间线中同时添加标题消失和logo位移动画，提前计算好logo需要移动的距离即可：

const logo = document.querySelector('#logo')
const titleContainer = document.querySelector('#title_container')
const parent = logo.parentElement
// 计算logo需要水平移动的距离，最终对齐父容器水平中心
const moveDistance = (parent.offsetWidth / 2) - (logo.offsetWidth / 2) - logo.offsetLeft

loader
// 标题动画，0代表和后续动画同时触发
.add({
  targets: "#title_container",
  duration: 800,
  easing: 'easeInOutQuart',
  scale: 0,
  opacity: 0
}, 0)
// logo同步位移动画
.add({
  targets: "#logo",
  duration: 800,
  easing: 'easeInOutQuart',
  translateX: moveDistance
}, 0)

方案2：利用布局收缩自动适配（无需手动计算位移） #

如果不想手动计算位移，可以修改动画逻辑让标题容器的布局空间同步收缩，利用Flex布局的特性自动调整logo位置：

1. 先给标题容器添加基础样式，避免收缩时内容溢出：

#title_container {
  flex-shrink: 1;
  overflow: hidden;
}

2. 修改Anime动画配置，同步对宽度做动画：

const titleContainer = document.querySelector('#title_container')
// 先记录标题容器原始宽度
const originWidth = titleContainer.offsetWidth

loader.add({
  targets: "#title_container",
  duration: 800,
  easing: 'easeInOutQuart',
  scale: 0,
  opacity: 0,
  width: [originWidth, 0]
})

如果父容器是固定宽度，只需额外给父容器添加justify-content: center样式，即可实现logo自动居中。

内容的提问来源于stack exchange，提问作者Arkadip Bhattacharya