css动画中的计数器变换

Question

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

使用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

请查看下图，了解此比例的变化情况：

紫色线显示过渡期间孩子的scaleY，蓝色线显示容器的scaleY，深黄色线显示容器scaleY * child scaleY

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

Answer 2

我认为这是因为这条线：

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

添加折叠时，您将内容的Y缩放为5，尝试将该值更改为1或者仅在内部div上执行缩放。你可以使用不透明度或其他东西淡出它？