使用 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;
}

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

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

谢谢。

Answer 1

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

那是因为在这一行中 transition: all 1s; 1s 表示 "Do the transition with a duration of 1 second"

只需将其更改为 0 或根本不写 1s，但这样就不需要转换了，对吗？所以您可以完全删除该行。

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

Divs set with vw and transition values not scaling smoothly. Any fix?

html

css

zurb-foundation