Question

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

使用transform：scale（）：当元素长宽比没有变化时，没问题。当比率应该改变时，我发现的解决方案是放一个容器，并在这个容器中放一个内部。然后将相反的变换应用于内部块，以便在动画期间和之后保持比率。

我做了一支笔来测试这个想法，但是它有效，但是在动画期间遇到了一个问题：在动画过程中内部块看起来很紧张。鉴于动画时间相同，宽松是线性的，我不明白为什么。

（在菜单上点击以切换动画）

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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 *子比例Y

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

Answer 2

我认为这是因为这一行：

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

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

css动画中的计数器变换

2 个答案: