web-animations - 使用Web Animations API扩展div高度0 --> 'auto'

Question

我正在努力了解 web animations standard和他们的 polyfill ，正如我所见，它在 Angular 动画库中运行良好(您将动画结束值设置为“*”，这将变为 div 大小的 100%，但它使用了特殊的 Angular Animations DSL)。

我想我会从一些简单的事情开始，所以我想做的就是将一个 div 从 0 高度扩展到“自动”。我知道还有成千上万种其他方法可以做到这一点，但我试图将 web-animations-js 与这段代码结合使用

下面的代码(类似于 MDN example)导致 div 直接展开为“自动”，但在延迟 1 秒后，而我希望它顺利展开。

let formDiv = document.querySelector("#new-present-form");
formDiv.animate([
    { height: 0},
    { height: 'auto'}
], {
    easing: 'ease-in-out',
    duration: 1000,
    fill: 'forwards'    // ensures menu stays open at end of animation
})

对比一下

formDiv.animate({
    height: [0, '100%'],
    easing: 'ease-in-out'
}, {
    duration: 1000,
    fill: 'forwards'    // ensures menu stays open at end of animation
})

导致 div 立即展开，但同样没有平滑过渡。

这确实提供了平滑的过渡，但需要仔细选择值来替换“300px”，而这正是我想要避免的。

formDiv.animate([
    { "height": '0px', offset: 0},
    { "height": '300px', offset: 1}
], {
    duration: 1000,
    iterations: 1,
    fill: 'forwards'    // ensure form stays open at end of animation
})

Answer 1

不幸的是，目前还不能直接使用 Web Animations 或 CSS animations/transitions 来做到这一点。这是因为 CSS 没有办法表示“自动”长度和固定长度之间的中间状态。解决此问题的建议涉及在 calc() 中允许“自动” ，例如calc(auto + 36px) .您可以在 CSS Transitions Github issue 上关注此开发进度。 .

在此期间，许多人已经能够通过动画来解决这个问题 max-height反而。例如，如果您希望“自动”高度介于 300 像素和 600 像素之间，则可以保留 height。作为“汽车”，并制作动画max-height从“0”到“700px”。它并不完美，但对于短动画来说通常已经足够接近了。

或者，可以将高度设置为 auto , 使用 getComputedStyle 获取高度的使用值，并且，假设它返回了 375px , 从 height: '0' 创建动画至 height: '375px' .如果不指定 fill在动画上然后当它完成时，高度的计算值将从 height: 375px 切换至 height: auto (这应该不会造成视觉上的差异，但意味着元素的高度会响应 future 内容大小的变化)。

关于部分关键帧的错误，这是一个短期问题，Firefox 和 Chrome 都没有提供对省略第一个或最后一个关键帧的支持。 Firefox 和 Chrome 都实现了这个功能，应该会在今年发布，但是，直到 auto 之前它仍然无法解决这个问题。在 calc() 中允许.

5 月 22 日更新，根据要求使用(完全未经测试的)代码示例:

// Option 1: Use max-height
formDiv.animate(
  { maxHeight: ['0', '700px'] },
  { easing: 'ease-in-out', duration: 1000 }
);

// Option 2: Use used height
//
// (Beware, flushes layout initially so will probably not be very performant.)
formDiv.style.height = 'auto';
const finalHeight = getComputedStyle(formDiv).height;
formDiv.style.height = '0';
formDiv.animate(
  { height: ['0', finalHeight] },
  { easing: 'ease-in-out', duration: 1000 }
);

当然，如果您实际上没有任何低于 div 的内容，您也许可以摆脱绝对是最重要的变换动画性能。

// Option 3: Use scale-y transform
formDiv.style.transformOrigin = '50% 0%';
formDiv.animate(
  { transform: ['scaleY(0)', 'scaleY(1)'] },
  { easing: 'ease-in-out', duration: 1000 }
);