我在transform scaleY上使用了div动画,以使其动画便宜,但是当对其应用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

您可以看到框阴影也被缩放。不仅如此,它还可以捕捉到动画的结尾,看起来很丑陋。

关于如何在不缩放阴影的同时保持60fps快速transform动画的任何建议?
对高度进行动画处理可以达到预期的效果,但在移动设备上落后很多。

已经尝试过

将阴影应用于div::after伪元素并转换div无效,因为阴影也会缩放。

最佳答案

您必须在这里使用其他元素。在元素上使用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>

10-05 20:39
查看更多