Transición de CSS anchura automática

Tengo un elemento cuyo ancho me gustaría animar cuando su contenido. Se ha width: auto, y este nunca cambia. He visto este truco, pero eso es para la transición entre dos valores y se establece uno. Yo no soy la manipulación de los valores, sólo el contenido, y me gustaría que mi tamaño del elemento a cambiar con la animación. Es esto posible en CSS?

Aquí una versión simplificada de mi código:

CSS:

.myspan {
  background-color: #ddd;
}

.myspan:hover::after {
  content: "\00a0\f12a";
  font-family: Ionicons;
  font-size: 80%;
}

HTML:

<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 que el cambio de tamaño para animar cuando el usuario pasa el ratón sobre el elemento.

  • No se puede animar auto con CSS sólo. Utilice el «max-height» truco que has vinculado a o, en la página de carga, ejecute un pequeño script que establece la altura final
  • ¿Cómo puedo utilizar el ancho máximo truco en este caso, donde ambos valores en la transición son variables?
  • Además, ¿qué quiere usted decir con «cuando el contenido de» cambio?…¿Por qué habría de hacer eso? Si usted está usando JS para hacer que…a continuación, utilizar JS para «automatizar» el cambio de ancho,
  • Con el max-width truco le da un valor que es lo suficientemente grande para dar cabida a la más amplia. Si publicas tu HTML y CSS que yo podría ser capaz de hacer una muestra para usted
  • El contenido cambia con un pseudo-elemento en movimiento (elem:hover::after)
  • Espero que no…pseudo-elementos no debe contener real contenido…están destinados para el estilo.
  • pseudo ?? … ahora que sin duda necesita para publicar su código
  • Publicado mi código.
  • En mi código actual, se añade un «cierre» icono

InformationsquelleAutor Luke Taylor | 2016-07-28

1 Kommentar

  1. 18

    Como ya he comentado, uno no puede animar auto (todavía), así que usa el max-width/max-height truco, o, si usted lo necesita para ser más exactos, establecer el ancho mediante una secuencia de comandos.

    Con el max-width/max-height truco, darle un valor lo suficientemente grande como para dar cabida a la más amplia.

    Pila fragmento de

    CSS:

    .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;
    }

    HTML:

    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
    
    <span class="myspan">Hello!</span>

    • Derecha, en el pseudo elemento. Yo pensaba que eran lo que sugiere que la ponía en el elemento principal, que es la razón por la que yo estaba confundido 😉
    • Si el icono cerrar tiene un ancho predefinido, puede usar el ancho de lugar,y dar la pseudo-el ancho final icono incluido
    • Lo siento, pero me puedes dar un poco más de ayuda? La combinación de overflow: hidden con display: inline-block hace que el ionicon desaparecer.
    • acaba de actualizar mi ejemplo, en la pregunta
    • Actualizado mi respuesta
    • Hmm, parece que funciona cuando traté de crear un MCVE demostrar el problema. Volveré si no puedo resolver.
    • El problema fue causado por mi (tonto) uso de line-height: 0 como un temporal hack para revisión de diseño. Obviamente, esto sería ocultar el icono cuando se utiliza overflow: hidden;. Lo siento por las molestias.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea