Eu estava escrevendo um widget e queria criar um efeito de ‘deslizamento’ usando as transições CSS3. Essencialmente, eu queria mostrar apenas parte do widget até que o usuário passasse o mouse sobre ele.
Como a parte oculta do widget era de largura variável, eu não poderia simplesmente fazer a transição entre duas larguras fixas, para mostrar todo o widget que estava usando width: auto.
Infelizmente, há um problema com as transições de largura e o autovalor, descrito aqui , e isso realmente não funciona.
No entanto, no link acima, Paul Irish menciona uma excelente solução: usar min-widthe em max-widthvez disso. Embora eu não soubesse quão largo o widget seria, eu sabia quão largo ele poderia ficar. Especifiquei isso com max-widthe o navegador cuidou do resto.
Meu estilo final era mais ou menos assim:
.widget {
overflow: hidden;
max-width: 100px;
-webkit-transition: max-width .5s ease;
transition: max-width .5s ease;
}
.widget:hover {
max-width: 200px;
}