Зазор с правой стороны при переходе на ширину

Question

У меня есть вертикальное полноэкранное меню с тремя столбцами. При наведении фактическая ширина столбцов растет, другие сокращаются. Единственная проблема, что на правой стороне есть небольшой промежуток, когда курсор перемещается быстро между столбцами.

code:

.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 длинные