Ancho automático de transición CSS
css3 animation (1)
Tengo un elemento cuyo ancho me gustaría animar cuando su contenido cambia.
Tiene
width: auto
, y esto nunca cambia.
He visto
este truco
, pero eso es para la transición entre dos valores y uno está configurado.
No estoy manipulando los valores en absoluto, solo el contenido, y me gustaría que el tamaño de mi elemento cambie con la animación.
¿Es esto posible en CSS?
Aquí hay una versión simplificada de mi código:
.myspan {
background-color: #ddd;
}
.myspan:hover::after {
content: "/00a0/f12a";
font-family: Ionicons;
font-size: 80%;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
<body>
<span class="myspan">Hello!</span>
</body>
</html>
Me gustaría animar el cambio de tamaño cuando el usuario pasa el cursor sobre el elemento.
Como comenté, uno no puede animar
auto
(todavía), así que use el truco
max-width
/
max-height
o, si necesita que sea más exacto, configure el ancho usando un script.
Con el truco
max-width
/
max-height
, dale un valor lo suficientemente grande como para acomodar el más ancho.
Fragmento de pila
.myspan {
display: inline-block;
font-size: 30px;
background-color: #ddd;
vertical-align: bottom;
}
.myspan::after {
content: " /00a0/f12a ";
font-family: ionicons;
font-size: 80%;
display: inline-block;
max-width: 0;
transition: max-width .6s;
vertical-align: bottom;
overflow: hidden;
}
.myspan:hover::after {
max-width: 80px;
transition: max-width 1s;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<span class="myspan">Hello!</span>