Agregar transición CSS3 expand/collapse

¿Cómo agrego una transición expand/collapse?Agregar transición CSS3 expand/collapse

2012-07-16 Felix

Un jsFiddle más adecuada sería: http://jsfiddle.net/Bq6eK/1/ – TheZ

Gracias, he intentado pegar el js en la ventana adecuada, pero no he tenido que funcione. – Felix

Esta es mi solución que se ajusta la altura de forma automática: http://jsfiddle.net/9ccjE/

he utilizado la solución que R3bel colocado: Can you use CSS3 to transition from height:0 to the variable height of content?

Fuente

2012-08-07 00:13:44 Felix

'.measuringWrap' no es necesario. Puede usar la propiedad scrollHeight de '.growDiv' http://jsfiddle.net/9ccjE/293/ – Guria

Incluso el código abreviado mediante el operador ternario: http://jsfiddle.net/9ccjE/838/ – Robbendebiene

esto debería funcionar, tenía que probar un tiempo demasiado ..: D

css3 animation jsfiddle

Fuente

2012-07-17 00:33:16 r3bel

Bien, pero ¿cómo evito establecer la altura en el javascript? La duración del contenido dentro de la clase más va a variar. – Felix

como está escrito [aquí] (http://stackoverflow.com/a/3512194/1517380) esto no es posible atm (ya que quería tener una animación ¿verdad?) excepto con [una solución costosa descrita aquí] (http://stackoverflow.com/questions/3149419/can-you-use-css3-to-transition-from-height0-to-the-variable-height-of-content) – r3bel

he editado su jsfiddle de nuevo y he agregado una "solución" para la altura dinámica, pero debe obtener el alto del menú desplegable cada vez que la altura del menú desplegable cambie con javascript: [jsfiddle] (http://jsfiddle.net/Bq6eK)/217 /). No te garantizo que esto funciona correctamente con todos los navegadores: D – r3bel

http://jsfiddle.net/Bq6eK/215/

Yo no modificar el código para esta solución, me escribió mi propio en su lugar. Mi solución no es exactamente la que pediste, pero tal vez podrías aprovecharla con los conocimientos existentes. Comenté el código también para que sepas qué estoy haciendo exactamente con los cambios.

Como una solución para "evitar establecer la altura en JavaScript", acabo de hacer de 'maxHeight' un parámetro en la función JS llamada toggleHeight. Ahora se puede configurar en el HTML para cada div de clase expandible.

Lo diré desde el principio, no tengo mucha experiencia con los lenguajes frontales, y hay un problema donde tengo que hacer clic dos veces en el botón 'Mostrar/ocultar' inicialmente antes de que comience la animación. Sospecho que es un problema con enfoque.

El otro problema con mi solución es que realmente puede averiguar cuál es el texto oculto sin presionar el botón mostrar/ocultar simplemente haciendo clic en el div y arrastrando hacia abajo, puede resaltar el texto que no está visible y pegarlo a un espacio visible.

Mi sugerencia para un siguiente paso sobre lo que he hecho es hacer que el botón mostrar/ocultar cambie dinámicamente. Creo que puedes averiguar cómo hacerlo con lo que ya pareces saber sobre mostrar y ocultar texto con JS.

Fuente

2012-07-17 08:48:27 ayang9

Hice dos ediciones menores: http://jsfiddle.net/Bq6eK/215/. 'onclick =" ... "' debe devolver falso, y la altura debe establecerse directamente para el elemento, no en el CSS. De lo contrario, tendrá que hacer clic dos veces para abrir el cuadro, porque 'elem.style' contiene solo el conjunto de estilos directamente para el elemento, pero no los estilos efectivos. – kay

Gracias! Entiendo ahora. – ayang9

Aquí hay una solución que no usa JS en absoluto. En su lugar, usa checkboxes.

Puede ocultar la casilla añadiendo esto a su CSS:

.container input{ 
    display: none; 
}

Y a continuación, añadir un poco de estilo para que se vea como un button.

Here's the source code that I modded.

Fuente

2012-07-20 19:30:50 ayang9

La solución no aplica una altura de acuerdo con la cantidad de texto. En CSS, debe decidir la altura del div verificado: entrada de .ac-container: checked ~ article.ac-small { \t height: 140px; } 'Necesito una solución que aplique la altura de acuerdo con el contenido. – Felix

OMG, he intentado encontrar una solución simple a este por horas . Sabía que el código era simple, pero nadie me proporcionó lo que quería. Así que finalmente trabajé en un código de ejemplo e hice algo simple que cualquiera puede usar sin necesidad de JQuery. Simple javascript y css y html. Para que la animación funcione, debes establecer el alto y el ancho o la animación no funcionará. Encuéntralo por la vía difícil.

<script> 
     function dostuff() { 
      if (document.getElementById('MyBox').style.height == "0px") { 

       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
      } 
      else { 
       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
      } 
     } 
    </script> 
    <div id="MyBox" style="height: 0px; width: 0px;"> 
    </div> 

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">

Fuente

2018-03-06 22:55:30 Deathstalker

Agregar transición CSS3 expand/collapse

Respuesta

Cuestiones relacionadas