CSS-переход игнорирует ширину
У меня есть тег, который отображается в виде блока. При загрузке страницы ее ширина увеличивается на css анимация от нуля до некоторого процента от содержащего div (скрипт содержит MWE, но в этом div есть более одной ссылки, каждая с разной шириной). При наведении я хочу, чтобы он менял цвет, менял цвет фона, а также расширялся до 100% div, используя CSS переход. Бит цвета и цвета фона работает, но, похоже, игнорирует переход ширины.
Фрагмент:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-duration: 1.5s;
animation-fill-mode: forwards;
transition: color, background-color, width 0.2s linear;/*WIDTH IGNORED*/
border: 2px solid #5e0734;
overflow: hidden;
white-space: nowrap;
margin-right: 0;
margin-left: 5px;
margin-top: 0;
margin-bottom: 5px;
padding: 0;
}
.home-bar:hover {
background-color: #5e0734;
color: white;
width: 100%;/*WIDTH IGNORED*/
text-decoration: none;
}
#bar0 {
-webkit-animation-name: grow0;
animation-name: grow0;
}
@keyframes grow0 {
from {
width: 0%;
}
to {
width: 75%;
}
}<a href = "#" id = "bar0" class = "home-bar">LINK</a>Примечание. Я тестировал это с изменением высоты ссылки при наведении, и это сработало. Только по ширине не получается. Возможно, это как-то связано с анимацией при загрузке страницы.
@MrBuggy Простите, нет, я поясню. Есть пять ссылок, каждая из которых расширяется до некоторого процента от div (менее 100%) при загрузке страницы. Это работает и идеально. Затем мне нужен переход способствовать, который еще больше увеличивает ширину ссылки (до 100%) во время наведения.
Чтобы было по-настоящему понятно, поместите весь код в вырезанный фрагмент и опишите, что происходит и что должно произойти ...
Очевидно, width:75% в анимации переопределяет width:100% в правиле: hover. Не уверен, почему, но вы можете переопределить это, определив новую анимацию в: hover. jsfiddle.net/MrLister/s5bopjet/2 Это сработает?
@MrLister Да, это должно быть то, что происходит, но я не знаю почему. Может, из-за animation-fill-mode: forwards;?
Вы ищете что-то вроде этого: codepen.io/STWebtastic/pen/ervYOM
@MrBuggy В принципе, да, но черная рамка растет, а не фиксируется в конце
Ответы 1
Когда вы устанавливаете ширину с помощью анимации, вы переопределяете любую другую ширину, определенную с помощью CSS, включая ширину, определенную при наведении курсора. Стили внутри ключевых кадров более специфичны, чем любые другие стили:
CSS Animations affect computed property values. This effect happens by adding a specified value to the CSS cascade ([CSS3CASCADE]) (at the level for CSS Animations) that will produce the correct computed value for the current state of the animation. As defined in [CSS3CASCADE], animations override all normal rules, but are overridden by !important rules. ref
Обходной путь - рассмотреть оба свойства width / max-width, чтобы избежать этой путаницы:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
animation: grow0 1.5s forwards;
transition: color, background-color, max-width 0.2s linear;
border: 2px solid #5e0734;
max-width: 75%; /*Set max-wdith*/
}
.home-bar:hover {
background-color: #5e0734;
color: white;
max-width: 100%; /* Update the max-width of hover*/
text-decoration: none;
}
/*Animate width to 100%*/
@keyframes grow0 {
from {
width: 10%;
}
to {
width: 100%;
}
}<a href = "#" id = "bar0" class = "home-bar">LINK</a>Кажется, причина в этом. Я пробовал добавить! Important к переходам, но это не помогло.
@Alex Затем переопределите саму анимацию.
@TemaniAfif Спасибо! Хороший обходной путь, но я обновил скрипт, и он не работает: jsfiddle.net/s5bopjet/3 Единственная разница в том, что я поместил максимальную ширину источника в css для этого отдельного блока, а не для класса, поскольку каждый имеет разную ширину .
@Alex покажи мне, может ты что-то забыл ... в анимации ширина должна быть 100%
@TemaniAfif Извините, я отправил свой комментарий на полпути. Скрипка обновлена
@Alex теперь проблема связана с конкретностью, идентификатор более конкретен, чем класс с наведением, поэтому наведение не будет применяться .. вот обходной путь, чтобы сделать наведение более конкретным: jsfiddle.net/s5bopjet/4
@TemaniAfif Это работает, спасибо. Не могли бы вы объяснить, что делает not(#randomid_58)?
@Alex, добавив идентификатор, я увеличил специфику, но поскольку я не могу добавить один и тот же идентификатор ко всем, я использую not (), чтобы сказать выберите все без этого идентификатора, и поскольку ни у кого нет этого идентификатора, он выберет все;) обратитесь к этому для дополнительная информация: stackoverflow.com/a/49742059/8620333
Позвольте нам продолжить обсуждение в чате.
Итак, вы хотите изменить / анимировать ширину, когда вы наводите ссылку не при загрузке страницы? Не уверен, что правильно понял?