У меня есть следующее правило css:
button:hover:after {
content: ' ' attr(title);
}
В основном кнопка имеет значок шрифта как контент и атрибут title. Когда вы наводите курсор на кнопку, она добавит пробел, а затем заголовок к содержимому кнопки. См. этот JSFiddle
Теперь вопрос, как мне это оживить? Я хочу, чтобы новая ширина кнопки была анимирована, поэтому она не выглядит такой статической и уродливой.
У меня есть решение, которое работает, но может быть не лучшим способом.
button:after {
content:' ' attr(title);
visibility: hidden;
opacity:0;
transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear;
font-size: 0;
}
button:hover:after {
content:' ' attr(title);
visibility: visible;
opacity:1;
transition-delay:0s;
font-size: 13px;
}
Фон
Ваш подход является аналогом использования свойства отображения. Поэтому кредиты идут на этот Переходы на экране: свойство с моим маленьким взломом, чтобы уменьшить размер шрифта до 0 в исходном состоянии :after
Обновление
Даже более плавный переход:
button:after {
content: ' ' attr(title);
font-size: 0;
opacity: 0;
transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease;
}
button:hover:after {
font-size: inherit;
opacity: 1;
transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease;
}
См. JSFiddle
Он может работать так, но для этого решения вам нужно будет установить фиксированную ширину на свою кнопку.
button:hover:after {
content: ' ' attr(title);
}
button:hover{
width:70px;
}
button{
width:20px;
overflow:hidden;
white-space:nowrap;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}