Actualmente estoy diseñando un menú 'mega desplegable' de CSS, básicamente un menú desplegable regular solo de CSS, pero que contiene diferentes tipos de contenido.

Por el momento, parece que las transiciones CSS 3 no se aplican a la propiedad 'display' , es decir, no se puede hacer ningún tipo de transición de display: nonea display: block(o cualquier combinación).

¿Hay alguna forma de que el menú de segundo nivel del ejemplo anterior se desvanezca cuando alguien pasa el cursor sobre uno de los elementos del menú de nivel superior?

Soy consciente de que puede usar transiciones en la visibility:propiedad, pero no puedo pensar en una forma de usar eso de manera efectiva.

También intenté usar la altura, pero eso simplemente falló miserablemente.

También soy consciente de que es trivial lograr esto usando JavaScript, pero quería desafiarme a mí mismo para usar solo CSS, y creo que me estoy quedando un poco corto.

Puede concatenar dos transiciones o más, y visibilityesta vez es lo que resulta útil.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(No olvide los prefijos de proveedor de la transitionpropiedad).

Más detalles están en este artículo .

Debe ocultar el elemento por otros medios para que esto funcione.

Logré el efecto colocando ambos <div>s absolutamente y configurando el oculto en opacity: 0.

Si incluso alterna la displaypropiedad de nonea block, su transición en otros elementos no ocurrirá.

Para evitar esto, siempre permita que el elemento sea display: block, pero oculte el elemento ajustando cualquiera de estos medios:

1. Establecer el heighta 0.
2. Establecer el opacitya 0.
3. Coloque el elemento fuera del marco de otro elemento que tiene overflow: hidden.

Es probable que haya más soluciones, pero no puede realizar una transición si cambia el elemento a display: none. Por ejemplo, puede intentar probar algo como esto:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

Pero eso no funcionará. Desde mi experiencia, he encontrado que esto no hace nada.

Debido a esto, siempre necesitarás mantener el elemento display: block, pero puedes evitarlo haciendo algo como esto:

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

En el momento de esta publicación, todos los principales navegadores deshabilitan las transiciones CSS si intenta cambiar la displaypropiedad, pero las animaciones CSS aún funcionan bien para que podamos usarlas como una solución alternativa.

Código de ejemplo (puede aplicarlo a su menú en consecuencia) Demostración :

Agregue el siguiente CSS a su hoja de estilo:

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

Luego aplique la fadeInanimación al niño en el desplazamiento del padre (y, por supuesto, establecido display: block):

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

Actualización 2019: método que también admite la desaparición gradual:

(Se requiere algún código JavaScript)

// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
  if (e.animationName === 'fade-in') {
      e.target.classList.add('did-fade-in');
  }
});

document.addEventListener('animationend', function (e) {
  if (e.animationName === 'fade-out') {
      e.target.classList.remove('did-fade-in');
   }
});

div {
    border: 5px solid;
    padding: 10px;
}

div:hover {
    border-color: red;
}

.parent .child {
  display: none;
}

.parent:hover .child {
  display: block;
  animation: fade-in 1s;
}

.parent:not(:hover) .child.did-fade-in {
  display: block;
  animation: fade-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>

Sospecho que la razón por la que las transiciones se desactivan si displayse cambia es por lo que realmente hace la pantalla. No , no cambia nada que posiblemente podría ser animado sin problemas.

display: none;y visibility: hidden;son dos cosas completamente diferentes.
Ambos tienen el efecto de hacer que el elemento sea invisible, pero visibility: hidden;aún se representa en el diseño, pero no de manera visible .
El elemento oculto todavía ocupa espacio, y todavía se representa en línea o como un bloque o bloque en línea o tabla o lo que sea que el displayelemento le indique que represente, y ocupa espacio en consecuencia.
Otros elementos no se mueven automáticamente para ocupar ese espacio. El elemento oculto simplemente no representa sus píxeles reales en la salida.

display: nonepor otro lado, en realidad evita que el elemento se procese por completo .
No ocupa ningún espacio de diseño.
Otros elementos que habrían ocupado parte o la totalidad del espacio ocupado por este elemento ahora se ajustan para ocupar ese espacio, como si el elemento simplemente no existiera en absoluto .

displayNo es solo otro atributo visual.
Establece todo el modo de representación del elemento, como por ejemplo si se trata de un block, inline, inline-block, table, table-row, table-cell, list-item, o lo que sea!
Cada uno de los que tienen muy diferentes ramificaciones de diseño y no habría ninguna forma razonable de animado o sin problemas la transición de ellos (trate de imaginar una transición suave de blocka inlineo viceversa, por ejemplo!).

Esta es la razón por la cual las transiciones se deshabilitan si la visualización cambia (incluso si el cambio es hacia o desde none, noneno es simplemente invisibilidad, ¡es su propio modo de representación de elementos que significa que no hay representación en absoluto!).

En lugar de devoluciones de llamada, que no existen en CSS, podemos usar la transition-delaypropiedad.

#selector {
    overflow: hidden; // Hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

Entonces, ¿qué está pasando aquí?

1. Cuando visiblese agrega la clase, ambos heighte opacityinician la animación sin demora (0 ms), aunque heighttarda 0 ms en completar la animación (equivalente a display: block) y opacity600 ms.

2. Cuando visiblese elimina la clase, opacitycomienza la animación (retraso de 0 ms, duración de 400 ms), y la altura espera 400 ms y solo entonces instantáneamente (0 ms) restaura el valor inicial (equivalente a display: noneen la devolución de llamada de animación).

Tenga en cuenta que este enfoque es mejor que los que usan visibility. En tales casos, el elemento todavía ocupa el espacio en la página, y no siempre es adecuado.

Para más ejemplos, consulte este artículo .

display no es una de las propiedades sobre las que funciona la transición.

Consulte Propiedades CSS animables para ver la lista de propiedades CSS que pueden tener transiciones aplicadas. Consulte el Módulo 4 de valores y unidades CSS, Combinación de valores: interpolación, adición y acumulación para ver cómo se interpolan.

Hasta CSS 3 figuraba en 9.1. Propiedades de CSS (solo cierre la ventana emergente de advertencia)

También intenté usar la altura, pero eso simplemente falló miserablemente.

La última vez que tuve que hacer esto, utilicé en su max-heightlugar, que es una propiedad animable (aunque fue un truco, funcionó), pero tenga en cuenta que puede ser muy molesto para páginas complejas o usuarios con dispositivos móviles de gama baja. dispositivos.

Puede agregar una animación personalizada a la propiedad de bloque ahora.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Manifestación

En esta demostración los cambios sub-menú de display:nonea display:blocky se las arregla para desvanecerse.

Según el borrador de trabajo del W3C, el 19 de noviembre de 2013 display no es una propiedad animable . Afortunadamente, visibilityes animable. Puede encadenar su transición con una transición de opacidad ( JSFiddle ):

• HTML:

  <a href="http://example.com" id="foo">Foo</a>
  <button id="hide-button">Hide</button>
  <button id="show-button">Show</button>

• CSS:

  #foo {
      transition-property: visibility, opacity;
      transition-duration: 0s, 1s;
  }
  
  #foo.hidden {
      opacity: 0;
      visibility: hidden;
      transition-property: opacity, visibility;
      transition-duration: 1s, 0s;
      transition-delay: 0s, 1s;
  }

• JavaScript para probar:

  var foo = document.getElementById('foo');
  
  document.getElementById('hide-button').onclick = function () {
      foo.className = 'hidden';
  };
  
  document.getElementById('show-button').onclick = function () {
      foo.className = '';
  };

Tenga en cuenta que si solo hace que el enlace sea transparente, sin configuración visibility: hidden, entonces se podrá hacer clic en él.

Editar: mostrar ninguno no se aplica en este ejemplo.

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

Lo que sucede arriba es que hasta el 99% de la visualización de la animación está configurada para bloquear mientras la opacidad se desvanece. En el último momento, la propiedad de visualización se establece en none.

Y lo más importante es retener el último cuadro después de que la animación termine usando el modo de relleno de animación: adelante

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

Aquí hay dos ejemplos: https://jsfiddle.net/qwnz9tqg/3/

¡Mi truco ordenado de JavaScript es separar todo el escenario en dos funciones diferentes !

Para preparar las cosas, se declara una variable global y se define un controlador de eventos:

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

Luego, cuando oculto el elemento, uso algo como esto:

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

Para reaparecer el elemento, estoy haciendo algo como esto:

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

Funciona, hasta ahora!

Me encontré con esto hoy, con un position: fixedmodal que estaba reutilizando. No pude mantenerlo display: noney luego animarlo, ya que simplemente apareció y z-index(valores negativos, etc.) también hicieron cosas raras.

También estaba usando un height: 0to height: 100%, pero solo funcionó cuando apareció el modal. Esto es lo mismo que si usaras left: -100%o algo así.

Entonces me di cuenta de que había una respuesta simple. Et voila:

Primero, tu modal oculto. Observe el heightes 0y revise la heightdeclaración en las transiciones ... tiene un 500ms, que es más largo que mi opacitytransición . Recuerde, esto afecta la transición de desvanecimiento de salida: devolver el modal a su estado predeterminado.

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

Segundo, tu modal visible. Digamos que está configurando un .modal-activea body. Ahora el heightes 100%, y mi transición también ha cambiado. Quiero heightque se cambie al instante y opacityque se tome 300ms.

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

Eso es todo, funciona como un encanto.

Tomando algunas de estas respuestas y algunas sugerencias en otros lugares, lo siguiente funciona muy bien para los menús emergentes (estoy usando esto con Bootstrap  3, específicamente):

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

También puede usar heighten lugar de max-heightsi especifica ambos valores, ya height:autoque no está permitido con transitions. El valor de desplazamiento de max-heightnecesita ser mayor que el heightdel menú.

Encontré una mejor manera para este problema, puedes usar CSS Animation y hacer tu increíble efecto para mostrar elementos.

    .item {
     display: none;
}

.item:hover {
     display: block;
     animation: fade_in_show 0.5s
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }
     100% {
          opacity: 1;
          transform: scale(1)
     }
}

Me he encontrado con este problema varias veces y ahora simplemente fui con:

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

Al agregar la clase block--invisible, no se podrá hacer clic en los Elementos completos, pero todos los Elementos detrás de él serán pointer-events:nonecompatibles con todos los principales navegadores (sin IE <11).

Cambiar overflow:hiddena overflow:visible. Funciona mejor Yo uso así:

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visiblees mejor porque overflow:hiddenactuar exactamente como a display:none.

No se requiere JavaScript, y no se necesita una altura máxima escandalosamente enorme. En su lugar, configure sus max-heightelementos de texto y use una unidad relativa de fuente como remo em. De esta forma, puede establecer una altura máxima mayor que su contenedor, evitando un retraso o "estallido" cuando se cierra el menú:

HTML

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

CSS

nav input + ul li { // Notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // A little bigger to allow for text-wrapping - but not outrageous
}

Vea un ejemplo aquí: http://codepen.io/mindfullsilence/pen/DtzjE

Después de que se escribió la respuesta aceptada de Guillermo, la especificación de transición CSS de 2012-04-03 cambió el comportamiento de la transición de visibilidad y ahora es posible resolver este problema de una manera más corta , sin el uso del retraso de transición:

.myclass > div {
                   transition:visibility 1s, opacity 1s;
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div
               {   visibility:visible; opacity:1 }

El tiempo de ejecución especificado para ambas transiciones generalmente debe ser idéntico (aunque un tiempo un poco más largo para la visibilidad no es un problema).

Para una versión en ejecución, vea mi publicación de blog Visibilidad de transición CSS .

Escriba el título de la pregunta "Transiciones en la pantalla: propiedad" y en respuesta a los comentarios de Rui Marques y josh a la respuesta aceptada:

Esta solución funciona en casos donde es irrelevante si se utiliza la propiedad de visualización o visibilidad (como probablemente fue el caso en esta pregunta).

No eliminará completamente el elemento display:none, solo lo hará invisible, pero aún permanecerá en el flujo del documento e influirá en la posición de los siguientes elementos.

Las transiciones que eliminan por completo el elemento similar display:nonese pueden hacer usando height (como lo indican otras respuestas y comentarios), max-height o margin-top / bottom, pero también vea Cómo puedo hacer la transición de height: 0; a la altura: auto; usando CSS? y mi blog publica soluciones para transiciones CSS en las propiedades de visualización y altura .

En respuesta al comentario de GeorgeMillo: se necesitan ambas propiedades y ambas transiciones: la propiedad de opacidad se usa para crear una animación de aumento gradual y la característica de visibilidad para evitar que el elemento siga reaccionando en eventos del mouse. Se necesitan transiciones en la opacidad para el efecto visual y en la visibilidad para retrasar la ocultación hasta que finalice el desvanecimiento.

Finalmente encontré una solución para mí, combinándome opacitycon position absolute(no ocupar espacio cuando está oculto).

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

Sospecho que cualquiera que esté comenzando las transiciones CSS descubre rápidamente que no funcionan si está modificando la propiedad de visualización (bloque / ninguno) al mismo tiempo. Una solución alternativa que aún no se ha mencionado es que puede seguir utilizando display:block/nonepara ocultar / mostrar el elemento, pero establecer su opacidad en 0 para que, incluso cuando lo sea display:block, siga siendo invisible.

Luego, para atenuarlo, agregue otra clase CSS como "on", que establece la opacidad en 1 y define la transición para la opacidad. Como puede haber imaginado, tendrá que usar JavaScript para agregar esa clase "on" al elemento, pero al menos todavía está usando CSS para la transición real.

PD: si se encuentra en una situación en la que necesita hacer ambas cosas display:blocky agregar la clase "on", al mismo tiempo, difiera la última utilizando setTimeout. De lo contrario, el navegador solo ve que ambas cosas suceden a la vez y desactiva la transición.

Es tan simple como lo siguiente :)

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

Haz que se desvanezca y luego hazlo height 0;. También asegúrese de usar los reenvíos para que permanezca en el estado final.

Esta solución tiene una excelente compatibilidad, y aún no la he visto:

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

Explicación : utiliza el visibility: hiddentruco (que es compatible con "mostrar y animar" en un solo paso), pero utiliza la combinación position: absolute; z-index: -1; pointer-events: none;para asegurarse de que el contenedor oculto no ocupe espacio y no responda a las interacciones del usuario .

Puede hacer que esto funcione de la manera natural que esperaba, usando la pantalla, pero debe acelerar el navegador para que funcione, ya sea usando Javascript o como otros han sugerido un truco elegante con una etiqueta dentro de otra. No me importa la etiqueta interna, ya que complica aún más el CSS y las dimensiones, así que aquí está la solución de Javascript:

https://jsfiddle.net/b9chris/hweyecu4/17/

Comenzando con un cuadro como:

<div id="box" class="hidden">Lorem</div>

Una caja escondida.

div.hidden {
    display: none;
}
#box {
    transition: opacity 1s;
}

Vamos a usar un truco que se encuentra en un q / a relacionado, verificando offsetHeight para estrangular el navegador instantáneamente:

https://stackoverflow.com/a/16575811/176877

Primero, una biblioteca que formaliza el truco anterior:

$.fn.noTrnsn = function () {
    return this.each(function (i, tag) {
        tag.style.transition = 'none';
    });
};
$.fn.resumeTrnsn = function () {
    return this.each(function (i, tag) {
        tag.offsetHeight;    
        tag.style.transition = null;
    });
};

A continuación, lo usaremos para revelar un cuadro y desvanecerlo en:

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden'))
        tag.noTrnsn().removeClass('hidden')
        .css({ opacity: 0 })
        .resumeTrnsn().css({ opacity: 1 });
    else
        tag.css({ opacity: 0 });
});

Esto desvanece la caja dentro y fuera. Entonces, .noTrnsn()apaga las transiciones, luego eliminamos elhidden clase, que voltea displaya partir nonede su valor por defecto, block. Luego establecemos la opacidad en 0 para prepararnos para desvanecernos. Ahora que hemos preparado el escenario, activamos las transiciones nuevamente con .resumeTrnsn(). Y finalmente, inicie la transición estableciendo la opacidad en 1.

Sin la biblioteca, tanto el cambio para mostrar como el cambio para la opacidad nos hubieran dado resultados indeseables. Si simplemente elimináramos las llamadas a la biblioteca, no obtendríamos ninguna transición.

Tenga en cuenta que lo anterior no establece la visualización en ninguno nuevamente al final de la animación de desvanecimiento. Sin embargo, podemos ser más elegantes. Hagámoslo con uno que se desvanece y crece en altura desde 0.

¡Lujoso!

https://jsfiddle.net/b9chris/hweyecu4/22/

#box {
    transition: height 1s, opacity 1s;
}

Ahora estamos haciendo la transición tanto de altura como de opacidad. Tenga en cuenta que no tenemos intención de altura, lo que significa que es el valor por defecto, auto. Convencionalmente, esto no se puede hacer la transición: pasar de automático a un valor de píxel (como 0) no conseguirá ninguna transición. Vamos a solucionar eso con la biblioteca y un método de biblioteca más:

$.fn.wait = function (time, fn) {
    if (time)
        this.delay(time);
    if (!fn)
        return this;

    var _this = this;
    return this.queue(function (n) {
        fn.call(_this);
        n();
    });
};

Este es un método conveniente que nos permite participar en la cola fx / animación existente de jQuery, sin requerir ninguno del marco de animación que ahora está excluido en jQuery 3.x. No voy a explicar cómo funciona jQuery, pero basta con decir, el .queue()y .stop()plomería que jQuery proporciona ayuda a prevenir las animaciones de pisar el uno al otro.

Animamos el efecto deslizante hacia abajo.

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden')) {
        // Open it
        // Measure it
        tag.stop().noTrnsn().removeClass('hidden').css({
            opacity: 0, height: 'auto'
        });
        var h = tag.height();
        tag.css({ height: 0 }).resumeTrnsn()
        // Animate it
        .css({ opacity: 1, height: h })
        .wait(1000, function() {
            tag.css({ height: 'auto' });
        });
    } else {
        // Close it
        // Measure it
        var h = tag.noTrnsn().height();
        tag.stop().css({ height: h })
        .resumeTrnsn()
        // Animate it
        .css({ opacity: 0, height: 0 })
        .wait(1000, function() {
            tag.addClass('hidden');
        });
    }
});

Este código comienza verificando #boxy si está actualmente oculto, verificando su clase. Pero logra más utilizando la wait()llamada a la biblioteca, al agregar elhidden clase al final de la animación de deslizamiento / desvanecimiento, que esperaría encontrar si de hecho está oculta, algo que el ejemplo más simple anterior no podría hacer. Esto también permite mostrar / ocultar el elemento una y otra vez, lo cual fue un error en el ejemplo anterior, porque la clase oculta nunca se restauró.

También puede ver los cambios de clase y CSS que se solicitan después .noTrnsn()para establecer generalmente el escenario para las animaciones, incluida la toma de medidas, como medir cuál será la altura final #boxsin mostrar eso al usuario, antes de llamar .resumeTrnsn(), y animarlo desde ese conjunto completo etapa a sus valores de CSS objetivo.

Vieja respuesta

https://jsfiddle.net/b9chris/hweyecu4/1/

Puede hacer la transición al hacer clic con:

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

El CSS es lo que adivinarías:

.hidden {
    display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
    -webkit-transition: transform 2s;
    transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

La clave es limitar la propiedad de visualización. Al eliminar la clase oculta y luego esperar 50 ms, luego comenzar la transición a través de la clase agregada, hacemos que aparezca y luego se expanda como quisiéramos, en lugar de que simplemente aparezca en la pantalla sin ninguna animación. Similar ocurre al revés, excepto que esperamos hasta que termine la animación antes de aplicar oculta.

Nota: Estoy abusando .animate(maxWidth)aquí para evitar las setTimeoutcondiciones de carrera. setTimeoutes rápido para introducir errores ocultos cuando usted u otra persona recoge el código sin darse cuenta. .animate()se puede matar fácilmente con .stop(). Solo lo estoy usando para poner un retraso de 50 ms o 2000 ms en la cola de fx estándar, donde es fácil de encontrar / resolver por otros codificadores que se basan en esto.

Tuve un problema similar al que no pude encontrar la respuesta. Algunas búsquedas en Google más tarde me llevaron aquí. Teniendo en cuenta que no encontré la respuesta simple que esperaba, me topé con una solución elegante y efectiva.

Resulta que la visibilitypropiedad CSS tiene un valor collapseque generalmente se usa para los elementos de la tabla. Sin embargo, si se usa en cualquier otro elemento, los convierte efectivamente en ocultos , más o menos igual, display: hiddenpero con la capacidad adicional de que el elemento no ocupa ningún espacio y aún puede animar el elemento en cuestión.

A continuación se muestra un ejemplo simple de esto en acción.

function toggleVisibility() {
  let exampleElement = document.querySelector('span');
  if (exampleElement.classList.contains('visible')) {
    return;
  }
  exampleElement.innerHTML = 'I will not take up space!';
  exampleElement.classList.toggle('hidden');
  exampleElement.classList.toggle('visible');
  setTimeout(() => {
    exampleElement.classList.toggle('visible');
    exampleElement.classList.toggle('hidden');
  }, 3000);
}

#main {
  display: flex;
  flex-direction: column;
  width: 300px;
  text-align: center;
}

.hidden {
  visibility: collapse;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 0.5s linear;
}

<div id="main">
  <button onclick="toggleVisibility()">Click Me!</button>
  <span class="hidden"></span>
  <span>I will get pushed back up...</span>
</div>

La solución universal más simple para el problema es: siéntase libre de especificar display:noneen su CSS, sin embargo, tendrá que cambiarlo block(o cualquier otra cosa) usando JavaScript, y luego también tendrá que agregar una clase a su elemento en cuestión que realmente realiza la transición con setTimeout () . Eso es todo.

Es decir:

<style>
    #el {
        display: none;
        opacity: 0;
    }
    #el.auto-fade-in {
        opacity: 1;
        transition: all 1s ease-out; /* Future, future, please come sooner! */
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
    }
</style>

<div id=el>Well, well, well</div>

<script>
    var el = document.getElementById('el');
    el.style.display = 'block';
    setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

Esto se probó en los últimos navegadores sanos. Obviamente no debería funcionar en Internet Explorer 9 o anterior.

Creo que SalmanPK tiene la respuesta más cercana. Se desvanece un elemento dentro o fuera, con las siguientes animaciones CSS. Sin embargo, la propiedad de visualización no se anima suavemente, solo la opacidad.

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

Si desea animar el elemento que se mueve desde el bloque de visualización para mostrar ninguno, no puedo ver que actualmente sea posible solo con CSS. Tienes que obtener la altura y usar una animación CSS para disminuir la altura. Esto es posible con CSS como se muestra en el siguiente ejemplo, pero sería difícil saber los valores exactos de altura que necesita animar para un elemento.

jsFiddle Ejemplo de

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " push-down";

Puede hacer esto con eventos de transición, por lo que crea dos clases CSS para la transición, una con la animación y otra sin mostrar el estado. ¿Y los cambias después de que termina la animación? En mi caso, puedo mostrar los divs nuevamente si presiono un botón y elimino ambas clases.

Prueba el fragmento a continuación ...

$(document).ready(function() {
  // Assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    // We check if this is the same animation we want
    if (event.originalEvent.animationName == "col_hide_anim") {
      // After the animation we assign this new class that basically hides the elements.
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      // We switch the animation class in a toggle fashion...
      // and we know in that after the animation end, there
      // is will the animation-helper-display-none extra
      // class, that we nee to remove, when we want to
      // show the elements again, depending on the toggle
      // state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        // I'm toggling and there is already the above class, then
        // what we want it to show the elements , so we remove
        // both classes...
        return "visibility_switch_off animation-helper-display-none";
      }
      else {
        // Here we just want to hide the elements, so we just
        // add the animation class, the other will be added
        // later be the animationend event...
        return "visibility_switch_off";
      }
    });
  });
});

table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding: 5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>

Si está utilizando jQuery para configurar sus clases, esto funcionará al 100%:

$(document).ready(function() {
  $('button').click(function() {
    var container = $('.container');
    
    if (!container.hasClass('active')) {
      container.addClass('show').outerWidth();
      container.addClass('active');
    }
    else {
      container.removeClass('active').one('transitionend', function() {
        container.removeClass('show');
      });
    }
  });
});

.container {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.container.show {
  display: flex;
}
 
.container.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Toggle</button>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Por supuesto, podría usar jQuery .fadeIn()y las .fadeOut()funciones, pero la ventaja de establecer clases en su lugar es en caso de que desee realizar la transición a un valor de visualización distinto de block(como es el valor predeterminado con .fadeIn()y .fadeOut()).

Aquí estoy flexhaciendo la transición para mostrar con un agradable efecto de desvanecimiento.

En lugar de usarlo display, puede almacenar el elemento 'fuera de pantalla' hasta que lo necesite, y luego establecer su posición donde lo desee y transformarlo al mismo tiempo. Sin embargo, esto plantea una gran cantidad de otros problemas de diseño, por lo que su kilometraje puede variar.

Probablemente no quiera usar de displaytodos modos, ya que desearía que el contenido fuera accesible para los lectores de pantalla, que en su mayor parte intentan obedecer las reglas de visibilidad, es decir, si no debería ser visible a simple vista, no se mostrará como contenido al agente.

Simplemente puede usar la visibilidad CSS : oculto / visible en lugar de mostrar : ninguno / bloque

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

Comencé un proyecto de esqueleto de código abierto llamado Toggle Display Animate .

Este asistente de esqueleto le permitirá imitar fácilmente jQuery show / hide, pero con animaciones de transición CSS 3 in / out.

Utiliza conmutadores de clase para que pueda usar cualquier método CSS que desee en los elementos además de mostrar: ninguno | bloque | tabla | en línea, etc., así como otros usos alternativos que se puedan pensar.

Su propósito de diseño principal es para estados de alternancia de elementos, y admite un estado de reversión donde ocultar el objeto le permite ejecutar su fotograma clave en reversa o reproducir una animación alternativa para ocultar el elemento.

La mayor parte del marcado para el concepto en el que estoy trabajando es CSS, y realmente se usa muy poco JavaScript.

Hay una demostración aquí: http://marcnewton.co.uk/projects/toggle-display-animate/