使用Web Animations API展开div height 0 --> 'auto‘

Question

我试图弄清楚web animations standard和它们的polyfill，因为我看到它在角度动画库中工作得很好(你将动画结束值设置为'*‘，这将变成100%的div大小，但这使用了一个特殊的角度动画DSL)。

我想我应该从一些简单的东西开始，所以我想要做的就是将一个div从0高度扩展到'auto‘。我知道有数以千计的其他方法可以做到这一点，但我尝试在下面的代码中使用web-animations-js

下面的代码(类似于MDN example)导致div直接扩展到'auto‘，但经过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动画或CSS动画/过渡来做到这一点。这是因为CSS没有表示“自动”长度和固定长度之间的中间状态的方法。解决这个问题的建议包括允许在calc()中使用'auto‘，例如calc(auto + 36px)。您可以在CSS Transitions Github issue上跟踪此开发的进度。

在此期间，许多人已经能够通过动画max-height来解决这个问题。例如，如果您希望“自动”高度在300px和600px之间，那么您可以将height保留为“auto”，并将max-height动画从“0”设置为“700px”。它并不完美，但对于一个短小的动画来说，它通常足够接近了。

或者，可以将height设置为auto，使用getComputedStyle获取height的used值，并假设它返回375px，从height: '0'到height: '375px'创建动画。如果您没有在动画上指定高度，那么当动画完成时，高度的计算值将从height: 375px切换到height: auto (这应该不会造成视觉上的差异，但意味着元素的高度将响应未来内容大小的更改)。

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

更新22月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 }
);

Answer 2

如果高度不是必须的，你可以尝试给div填充。

@keyframes example {
   from{padding:0px;}
    to{padding: 50px;}
}

如果它是完全有帮助的，请投票支持。