por favor consulte el siguiente jsFiddle

http://jsfiddle.net/SgyEW/10/

Puede hacer clic en los diferentes botones que muestra los diferentes contenido de longitud que hace que el cuadro para aumentar/reducir.

Quiero que el cambio de altura para ser animados para que no sea tan nervioso, trató de esto, añadiendo:

-webkit-transition: all 1s linear;

Pero que no tiene efecto en este caso de uso. Cualquier idea en términos de una solución que no requiere JavaScript?

Gracias

InformationsquelleAutor TheExit | 2011-07-05

2 Comentarios

  1. 6

    Me temo que no hay forma de animación de altura con transiciones CSS3 sin Javascript asistencia, check out:

    ¿Cómo puedo transición altura: 0; a: altura: auto; el uso de CSS?

    Se puede usar CSS3 para la transición de altura:de 0 a la variable altura de contenido?

    Además, el código va de display: none a display: block, que no tienen un efecto sobre la altura en cualquier caso. En lugar de mostrar ninguno de altura: 0 con overflow: hidden;

  2. 1

    Ha sido 8 años, pero para aquellos que buscan la solución a esta solicitud:

    Aquí está mi JS Violín

    http://jsfiddle.net/0vLmq97j/1/

    CSS

    #box {
    border: 1px solid gray;
    background-color: #f3f3f3;
    -webkit-transition: all 1s linear;
    }
    
    .content {display:none}
    
    .new_content {
      transition: 1s;
    }

    JS

    $('.toggler').on('click', function() {
    
    var idname = $(this).attr('name');
    var content = $('#' + idname).html();
    var content_height = $('#' + idname).height();
    $('.new_content').html(content).css("height", content_height);
    
    });

    También, lo que ha cambiado:

    • No utilizar nunca más «display: none» y «display: block» como el método que se basa en. Prefiere utilizar el contenido de reemplazo de una muestra estática div
    • El div de contenido (‘.new_content’) no tienen una altura, de su facultativo.
    • El JS establece la altura en función del ocultos div.
    • La transición que hace el trabajo.

    Espero que ayude.

Dejar respuesta

Please enter your comment!
Please enter your name here