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

如何消除这种差距......

一个解决方案可能是使用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，在子容器上使用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>

然而，第二种方法存在问题。您必须为孩子们提供初始宽度（ width:auto不会触发转化）。此外，一旦盘旋，就不可能精确控制孩子的宽度。 table-cell会自行重新计算宽度。我建议使用flex的第一种方法。

为什么会出现？

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

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

当您将鼠标悬停在容器上时，所有孩子都会从30%开始缩小到33.3333%宽度。当发生这种情况时，右边会有额外的空间（30 * 3 != 100）。同时，发生悬停的孩子开始将其宽度增加到40%。当你慢慢地进行时，有足够的时间让两个过渡顺利完成。但是，当您快速悬停时，当另一个转换开始并且突然结束时，一个转换尚未完成，从而导致闪烁。

Answer 2

差距来自动画风格。默认transition-timing-function是轻松的，可以用立方bezier curve来描述。可能的解决方案可能是设置transition-timing-function: linear或添加transition-delay。

每次输入元素时，都会计算动画持续时间。因此，当一个元素处于全宽，然后快速重新进入时，将导致从90％宽度到100％宽度的动画完整.6s长

过渡宽度时右侧有间隙

2 个答案: