html - 使用 vw 和过渡值设置的 Div 无法平滑缩放。任何修复？

Question

这是 my example在 Jsfiddle

HTML

<div class="right1"></div>  
<div class="right2"></div>  
<div class="right3"></div>  
<div class="right4"></div>  
<div class="right5"></div>

<div class="cube"></div>
</div>

CSS

 .cube-cont {
    width: 20vw;
    height: 20vw;
    background-color: #877c7f;
    margin: 20vh auto;
    position: relative;
}

.right1,
.right2,
.right3,
.right4,
.right5 {
    width: 15vw;
    height: 4vw;
    background-color: #7FC7A6;
    position: absolute;
    top: 0;
    left: 20vw;
    transition: all 1s;
    transform: translateX(-12vw);
}

.right2 {
    top: 4vw;
}

.right3 {
    top: 8vw;
}

.right4 {
    top: 12vw;
}

.right5 {
    top: 16vw;
}

.right1:hover,
.right2:hover,
.right3:hover,
.right4:hover,
.right5:hover {
    transform: 1s;
    transform: translateX(0);
}

.cube {
    width: 20vw;
    height: 20vw;
    background-color: #877c7f;
    position: absolute;
    top: 0;
    right: 0;
}

如您所见，当窗口调整大小时，绿色 div 的缩放会稍微延迟，这使得调整大小看起来很困惑。灰色立方体缩放完美，所以它似乎是导致它的过渡值。

有什么方法可以解决这个问题，使它们统一缩放？

谢谢。

Answer 1

the green divs' scaling is delayed slightly which makes resizing appear messy

那是因为在这行 transition: all 1s; 1s 的意思是“执行持续时间为 1 秒的转换”

只需将其更改为 0 或根本不写 1，但是您真的不需要转换，对吗？因此，您可以完全删除该行。