过渡宽度时右侧出现间隙

Question

我有一个垂直全屏菜单，有三列。悬停时，实际列宽会增加，其他列会缩小。唯一的问题，当光标在列之间快速移动时，右侧有一点缝隙。

.service-navigation {
    height: 100%;
    width: 100%;
}
.service-navigation:hover .service-navigation-element {
    width: 30%;
}

.service-navigation:hover .service-navigation-element:hover {
    width: 40%;
}

.service-navigation-element {
    width: 33.333333%;
    height: 100%;
    transition: .6s ease;
    float: left;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    box-sizing: content-box;
    overflow: hidden;
}

我怎样才能消除这个差距，为什么会有差距？

Answer 1

动画风格造成的差距。默认transition-timing-function is ease-in-out, wich can be described in a cubic bezier curve. possible solutions may be to set transition-timing-function: linear or adding a transition-delay.

此外，每次输入元素时都会计算动画持续时间。因此，在元素处于全宽状态时离开该元素然后快速重新进入它会导致从 90% 宽度到 100% 宽度的动画达到完整的 .6s 长

Answer 2

How can I remove that gap,...

一个解决方案可能是使用flex。这将使事情变得更加容易和顺利。只需在悬停时更改 flex-basis。

示例 1:

* { box-sizing: border-box; padding: 0; margin: 0; }
body, html { height: 100vh; width: 100vw; }
.service-navigation { height: 100%; width: 100%; display: flex; }
.service-navigation-element { flex: 1 1 33%;  transition: .6s ease; }
.service-navigation-element:hover { flex-basis: 50%; }
.service-navigation-element:nth-child(1) { background-color: red; }
.service-navigation-element:nth-child(2) { background-color: green; }
.service-navigation-element:nth-child(3) { background-color: blue; }

<div class="service-navigation">
    <div class="service-navigation-element">1</div>
    <div class="service-navigation-element">2</div>
    <div class="service-navigation-element">3</div>
</div>

另一种 解决方案可能是在容器上使用 display: table 并在 children 上使用 display: table-cell。

示例 2:

* { box-sizing: border-box; padding: 0; margin: 0; }
body, html { height: 100vh; width: 100vw; }
.service-navigation { height: 100%; width: 100%; display: table; }
.service-navigation-element { display: table-cell; width: 10%; transition: .6s ease; }
.service-navigation-element:hover { width: 20%; }
.service-navigation-element:nth-child(1) {  background-color: red; }
.service-navigation-element:nth-child(2) { background-color: green; }
.service-navigation-element:nth-child(3) { background-color: blue; }

<div class="service-navigation">
    <div class="service-navigation-element">1</div>
    <div class="service-navigation-element">2</div>
    <div class="service-navigation-element">3</div>
</div>

但是，第二种方法存在问题。您必须为 children 提供初始宽度（width:auto 不会触发转换 ）。此外，children 悬停后无法精确控制宽度。 table-cell 会 re-calculate 自己的宽度。我会推荐使用 flex.

的第一种方法

and why is it there?

我认为是因为这两条规则：

.service-navigation:hover .service-navigation-element {
    width: 30%;
}
.service-navigation:hover .service-navigation-element:hover {
    width: 40%;
}

当您将鼠标悬停在容器上时，所有 children 开始从 33.3333% 减少到 30% 宽度。当发生这种情况时，右侧将有额外的 space (30 * 3 != 100)。同时，触发悬停的 child 开始将其宽度增加到 40%。当你慢慢地做时，有足够的时间让两个过渡顺利完成。但是，当您快速悬停时，当另一个过渡开始时一个过渡尚未完成并突然结束，从而导致闪烁。

过渡宽度时右侧出现间隙

Gap on the right side when transitioning width

html

css

css-transitions