css动画中的反变换

Question

在某些界面中，我想做动画。由于 transform 属性比其他 CSS 属性更优化，所以我将使用它。

with transform: scale() : 当元素纵横比不变时，没问题。当比例应该改变时，我找到的解决方案是放置一个容器，并在这个容器中放置一个内部。然后将反向变换应用于内部块，以便在动画期间和之后保持比例。

我做了一支笔来测试这个想法，它可以工作，但是在动画过程中出现了一个问题：内部块在动画过程中看起来被拉伸了。我不明白为什么动画时间是一样的，而且缓动是线性的。

https://codepen.io/AdamElio/pen/PabejP

（点击菜单切换动画）

document.querySelector('#menu').addEventListener('click', function() {
    this.classList.toggle('collapsedd')
});

#menu {
  margin: 30px;
  padding: 15px;
  background: white;
  width: 150px;
  overflow: hidden;
  transform-origin: top center;
  transition: transform .5s linear;
}

#menu.collapsedd {
  transform: scaleY(.2);
}

#menu .inner {
  transition: transform .5s linear;
  transform-origin: top center;
}

#menu.collapsedd .inner {
  transform: scaleY(5);
}

#menu .inner ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

<nav id="menu">
  <div class="inner">
    <h5>Menu</h5>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </div>
</nav>

<div id="transform"></div>

Answer 1

发生这种情况是因为在转换发生时计数器转换不一样。考虑到您的示例，容器将从scaleY(0.2) 变为scaleY(1)，而子容器将从scaleY(5) 变为scaleY(1)。

在过渡结束和开始时，这将起作用，导致容器和子变换将“取消”：

• 开始：0.2 * 5 = 1
• 结束：1 * 1 = 1

但过渡的中间步骤并非如此。例如，当转换完成 50% 时：

• 容器比例Y：0.2 + (1 - 0.2) * 0.5 = 0.6
• 儿童量表Y：5 + (1 - 5) * 0.5 = 3
• 容器刻度 Y * 子刻度 Y：0.6 * 3 = 1.8

查看下图，了解该比例如何变化：

紫线表示过渡时child的scaleY，蓝线表示容器的scaleY，深黄线表示容器的scaleY * child scaleY

因此，为了在转换过程中真正取消容器变换，您需要使用一个缓动函数来保存整个转换过程中的表达式container scale * child scale = 1。这不是一件容易的事。

Answer 2

我认为是因为这条线：

#menu.collapsedd .inner {
  transform: scaleY(5);
}

添加 collapsedd 后，您将内容的 Y 缩放为 5，尝试将该值更改为 1，或者只是不对内部 div 进行缩放。你可以使用不透明度或其他东西来淡出它吗？