如何在不以高性能方式缩放其投射的盒子阴影的情况下缩放 div？

Question

我在div 上使用transform scaleY 动画，以廉价地为其hegiht 设置动画，但是当应用box-shadow 时效果不佳。

div {
    width: 300px;
    height: 100px;
    transform: scaleY(1);
    transition: all 2000ms;
    transform-origin: 0 0;
    background-color: yellow;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
                0 1px 10px 0 rgba(0, 0, 0, 0.12),
                0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
div:hover {
    transform: scaleY(5);
}

<div></div>

jsbin.com demo

你可以看到 box-shadow 也被缩放了。不仅如此，它捕捉在动画的结尾，看起来很丑。

关于如何在不缩放阴影的同时保持这个快速的 60fps transform 动画的任何建议？ 对高度进行动画处理可以获得所需的效果，但在移动设备上会滞后很多。

已经尝试过

将阴影应用于div::after 伪元素并转换div 不起作用，因为阴影也会被缩放。

Answer 1

你必须在这里使用另一个元素。对元素使用 transform 会影响其子元素和 :after、:before 伪元素。阴影必须在上面的元素中才能使用变换工作。您可以尝试在伪选择器中使用 scaleY(1) 和 scale(-X) ，但这并不可靠。

div {
    width: 300px;
    height: 100px;
    
    z-index: 1;
    position: relative;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
                0 1px 10px 0 rgba(0, 0, 0, 0.12),
                0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
div span {
    transform: scaleY(1);
    transition: all 2000ms ease;
    transform-origin: 0 0;
    background-color: yellow;
    display: block; 
    width: 300px; height: 100px;
} 
div:hover span {
    transform: scaleY(5);
}

<div><span></span></div>