3

我正在尝试了解网络动画标准及其polyfill，因为我看到它在 Angular 动画库中运行良好（您将动画结束值设置为 '*' ，这将成为 div 大小的 100%，但是使用特殊的 Angular Animations DSL）。

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

下面的代码（类似于MDN 示例）导致 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
})
4

2 回答 2

1

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

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

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

关于部分关键帧的错误，这是一个短期问题，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 }
);
于 2017-06-11T23:36:12.620 回答
-4

如果高度不是强制性的，您可以尝试为 div 提供填充。

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

如果帮助已满，请投票。

于 2017-06-10T13:43:07.310 回答