css - examples - Transiciones en la pantalla: propiedad

transition css generator

Question

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

En este momento, parece que las Transiciones CSS3 no se aplican a la propiedad ''pantalla'' , es decir, no se puede hacer ningún tipo de transición desde display: none para display: block (o cualquier combinación).

¿Alguien puede pensar en una manera para que el menú de segundo nivel del ejemplo anterior se "difumine" cuando alguien se sitúa 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 utilizar eso de manera efectiva.

También he intentado usar la altura, pero eso solo fracasó estrepitosamente.

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

Todas y cualesquiera sugerencias son bienvenidas.

Answer 1

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

Para preparar 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!

Answer 2

Cambiar overflow:hidden a 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;
}

visible es mejor porque overflow:hidden acto overflow:hidden exactamente como una display:none .

Answer 3

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 moviéndose del bloque de visualización a mostrar ninguno, no puedo ver que actualmente solo es posible con CSS, debe 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 de altura exactos que necesita para animar un elemento.

Ejemplo de jsFiddle

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";

Answer 4

De acuerdo con el borrador de trabajo del W3C del 19 de noviembre de 2013, la display no es una propiedad animable . Afortunadamente, la visibility es 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 la prueba:

  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 configurar la visibility: hidden , entonces se podrá hacer clic en él.

Answer 5

Después de que la respuesta aceptada de Guillermo se escribiera, la especificación de transición CSS del 3 de abril de 2012 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 retardo 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 debería 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 blog http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity .

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 los casos en que es irrelevante si se usa la propiedad de visualización o visibilidad (ya que probablemente fue el caso en esta pregunta). No eliminará completamente el elemento como pantalla: ninguno, solo lo hará invisible, pero aún permanece en el flujo del documento e influye en la posición de los siguientes elementos. Transiciones que eliminan por completo el elemento similar a mostrar: ninguna se puede hacer usando altura (como lo indican otras respuestas y comentarios), altura máxima o margen superior / inferior, pero también vea ¿Cómo puedo hacer una transición de altura: 0; a la altura: auto; usando CSS? y mi blog http://www.taccgl.org/blog/css_transition_display.html .

En respuesta al comentario de GeorgeMillo: tanto las propiedades como las dos transiciones son necesarias: la propiedad de opacidad se utiliza para crear una animación de entrada y salida y la propiedad de visibilidad para evitar que el elemento siga reaccionando en los 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.

Answer 6

Edición: mostrar ninguno no se está aplicando en este ejemplo.

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

Lo que está sucediendo 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 ninguna.

Y lo más importante es retener el último fotograma después de que la animación termine con el modo de relleno-animación: reenviar

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

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

Answer 7

En el momento de esta publicación, todos los navegadores principales deshabilitan las transiciones de CSS si intentas cambiar la propiedad de display , pero las animaciones de CSS siguen funcionando bien, así que podemos usarlas como una solución alternativa.

Código de ejemplo: - (Puede aplicarlo a su menú en consecuencia) Demo

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

A continuación, aplique la animación fadeIn al elemento fadeIn al fadeIn por el padre: - (y, por supuesto, configurar display: block )

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

Answer 8

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

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

Entonces, ¿qué está pasando aquí?

1. Cuando se agrega visible clase visible , tanto la height como la opacity inician la animación sin demora (0 ms), aunque la height tarda 0 ms en completar la animación (equivalente a la display: block ) y la opacity toma 600 ms.

2. Cuando se elimina la clase visible , la opacity inicia la animación (0ms de retardo, 400ms de duración), y la altura espera 400ms y solo entonces (0ms) restaura el valor inicial (equivalente a la display: none en la devolución de llamada de la animación).

Tenga en cuenta, este enfoque es mejor, que los que utilizan la visibility . En tal caso, el elemento aún ocupa el espacio en la página, y no siempre es adecuado.

Para más ejemplos, por favor consulte este article .

Answer 9

En lugar de utilizar la pantalla, puede almacenar el elemento ''fuera de pantalla'' hasta que lo necesite, luego establecer su posición en el lugar que desee y transformarlo al mismo tiempo. Sin embargo, esto trae una gran cantidad de otros problemas de diseño, así que ymmv. Es probable que no quiera usar la pantalla de todos modos, ya que desearía que el contenido sea accesible para los lectores de pantalla, que en su mayor parte tratan de obedecer las reglas de visibilidad, es decir, si no debería ser visible a los ojos, no se mostrará como contenido para el agente.

Answer 10

Finalmente encontré una solución para mí, combinando la opacity con la position absolute (no ocupar espacio cuando estaba oculto).

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

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

Answer 11

La solución universal más simple para el problema es: siéntase libre de especificar la display:none en su CSS, sin embargo, tendrá que cambiarla para block (o cualquier otra cosa) usando JavaScript, y luego también tendrá que agregar una clase a su elemento. en cuestión que realmente hace 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>

Probado en los últimos navegadores sanos. Obviamente no debería funcionar en IE9 o anterior.

Answer 12

Me encontré con esto hoy, con una position: fixed que estaba reutilizando. No pude mantenerlo en display: none y luego animarlo, ya que saltó a la apariencia, y el z-index (valores negativos, etc.) también hizo cosas extrañas.

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

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

Primero, tu modal oculto. Observe que la height es 0 y revise la declaración de height en las transiciones ... tiene 500ms , que es más larga que la transición de opacity . Recuerde, esto afecta la transición de desvanecimiento saliente: 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;
}

En segundo lugar, tu modal visible. Digamos que estás configurando un .modal-active para el body . Ahora la height es del 100% , y mi transición también ha cambiado. Quiero que la height cambie instantáneamente y que la opacity 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, funciona como un encanto.

Answer 13

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 el block--invisible clase block--invisible , no se podrá hacer clic en los Elementos completos, pero todos los Elementos detrás de él se deberán a los pointer-events:none que sea compatible con todos los navegadores principales (no IE <11).

Answer 14

Me siento casi mal respondiendo a una pregunta con tantas respuestas, pero esta solución tiene una compatibilidad excelente y todavía 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 la visibility: hidden truco visibility: hidden (que es compatible con "mostrar y animar" en un solo paso) pero usa la position: absolute; z-index: -1; pointer-events: none; combinación position: absolute; z-index: -1; pointer-events: none; position: absolute; z-index: -1; pointer-events: none; para asegurarse de que el contenedor oculto no ocupa espacio y no responde a las interacciones del usuario .

Answer 15

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

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

Si incluso cambia la propiedad de display de none a block , su transición en otros elementos no se producirá.

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

1. Establecer la height a 0 .
2. Establezca la opacity en 0 .
3. Coloque el elemento fuera del marco de otro elemento que tiene overflow: hidden .

Probablemente hay más soluciones, pero no puede realizar una transición si cambia el elemento para display: none . Por ejemplo, puedes 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 podrías sortearlo haciendo algo como esto:

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

Answer 16

No se requiere javascript, y no se necesita una altura máxima exageradamente enorme. En su lugar, establezca su altura máxima en los elementos de texto y use una unidad relativa a la fuente, como rem o em. De esta manera, puede establecer una altura máxima más grande que su contenedor, mientras evita el retraso o el "popping" 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

Answer 17

Puede concatenar dos transiciones o más, y la visibility es lo que viene a la mano en este momento.

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 del proveedor a la propiedad de transition )

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

Answer 18

Puedes hacer esto con los eventos de transición, así que lo que es, construyes 2 clases css para la transición, una sosteniendo la animación otra, manteniendo el estado de no mostrar. ¿Y los cambias una vez finalizada la animación? En mi caso, puedo mostrar los divs de nuevo si presiono un btn y elimino ambas clases.

Prueba el recorte 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")) {
        //im toggleing and there is already the above classe, 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>

Answer 19

Sé que esta es una pregunta muy antigua, pero para las personas que están viendo este hilo, ahora puede agregar una animación personalizada a la propiedad de bloque.

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

Demo

En esta demostración, el submenú cambia de display:none a display:block y aún se las arregla para desvanecerse.

Answer 20

Sospecho que alguien que acaba de comenzar las transiciones de CSS descubre rápidamente que no funcionan si está modificando la propiedad de visualización (bloque / ninguna) al mismo tiempo. Una solución alternativa que aún no se ha mencionado es que puede seguir utilizando display: block / none para ocultar / mostrar el elemento, pero establezca su opacidad en 0 para que incluso cuando se muestra: block, todavía sea invisible. Luego, para atenuarlo, agregue otra clase de 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 "en" 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: display y block class "on", al mismo tiempo, aplace este último con setTimeout. De lo contrario, el navegador solo ve que ambas cosas suceden a la vez y desactiva la transición.

Answer 21

Sospecho que la razón por la que las transiciones se deshabilitan si se cambia la "visualización" se debe a lo que realmente hace la visualización. No cambia nada que pueda ser animado sin problemas.

"Pantalla: ninguna" y "visibilidad: oculta" son dos cosas completamente diferentes. Ambos tienen el efecto de hacer que el elemento sea invisible, pero con "visibilidad: oculta"; todavía se muestra en el diseño, pero no es visible . El elemento oculto aún ocupa espacio, y aún se representa en línea o como un bloque o bloque en línea o tabla o lo que sea que el elemento "pantalla" le indique que se represente como, 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 a la salida.

"Display: none" por otra parte, en realidad evita que el elemento se renderice por completo . No ocupa ningún espacio de diseño. Otros elementos que habrían ocupado parte o todo el espacio ocupado por este elemento ahora se ajustan para ocupar ese espacio, como si el elemento simplemente no existiera en absoluto .

"Pantalla" no es solo otro atributo visual. Establece el modo de representación completo del elemento, por ejemplo, si es un bloque, en línea, en línea, tabla, fila de tabla, tabla-celda, lista-elemento, o lo que sea! Cada uno de ellos tiene ramificaciones de diseño muy diferentes, y no habría una manera razonable de animarlos o realizar una transición sin problemas (¡intente imaginar una transición suave de "bloque" a "en línea" o viceversa, por ejemplo!).

Esta es la razón por la que las transiciones se deshabilitan si la pantalla cambia (incluso si el cambio es hacia o desde "ninguna" - "ninguna" no es simplemente invisibilidad, es su propio modo de representación de elemento que significa que no hay representación en absoluto),

Answer 22

Tomando de algunas de estas respuestas y algunas sugerencias en otros lugares, lo siguiente funciona muy bien para los menús flotantes (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 la height en lugar de max-height si especifica ambos valores desde la height:auto no está permitido con las transition . El valor de hover de max-height debe ser mayor que la height del menú posiblemente puede ser.

Answer 23

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

Consulte http://www.w3.org/TR/css3-transitions/#animatable-properties- para ver la lista de propiedades a las que se les pueden aplicar las transiciones.

Answer 24

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, solo puede usar jQuery .fadeIn()y las .fadeOut()funciones, pero la ventaja de configurar clases es que, en caso de que desee hacer la transición a un valor de visualización diferente a block(como es el valor predeterminado con .fadeIn()y .fadeOut())

Aquí estoy flexhaciendo la transición para mostrar con un bonito efecto de fundido.

Answer 25

También puedes usar esto:

.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}

Answer 26

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

https://marcnewton.github.io/Toggle-Display-Animate/

Este asistente de esqueleto te permitirá imitar / ocultar fácilmente jQuery pero con animaciones de transición CSS3 de entrada / salida.

Utiliza los conmutadores de clase para que pueda usar cualquier método css que desee en los elementos además de mostrar: none | block | table | inline, etc., así como otros usos alternativos que se pueden idear.

Su propósito principal de diseño es para los estados de alternancia de elementos, admite un estado de reversión en el que 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 formato del concepto en el que estoy trabajando es CSS, en realidad se usa muy poco javascript.

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

Answer 27

Puede hacer que esto funcione de la manera natural que esperaba, usando la pantalla, pero tiene que controlar el navegador para que funcione, usando JS 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 JS:

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

Comenzando con una caja como:

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

Una caja oculta. Puedes 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 la limitación de 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 queríamos, en lugar de que aparezca en la pantalla sin ninguna animación. Algo similar ocurre de otra manera, excepto que esperamos hasta que finalice la animación antes de aplicar la ocultación.

Nota: estoy abusando .animate(maxWidth)aquí para evitar setTimeoutcondiciones de carrera. setTimeoutes rápido para introducir errores ocultos cuando usted u otra persona recoge el código sin saberlo. .animate()Se puede matar fácilmente con .stop(). Solo lo estoy usando para poner una demora de 50 ms o 2000 ms en la cola de fx estándar donde es más fácil encontrarlo / resolverlo con otros codificadores que están construyendo sobre esto.

Answer 28

Se puede manejar usando funciones de tiempo de transición step-endystep-start

Por ejemplo: https://jsfiddle.net/y72h8Lky/

$(".run").on("click", function() {
    $(".popup").addClass("show");
});
$(".popup").on("click", function() {
    $(".popup").removeClass("show");
})

.popup {
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1450;
    background-color: rgba(0, 175, 236, 0.6);
    transition: opacity 0.3s ease-out, top 0.3s step-end;
}
.popup.show {
    transition: opacity 0.3s ease-out, top 0.3s step-start;
    opacity: 1;
    top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<button class="run" style="font-size: 24px;">Click on me</button>

Answer 29

Simplemente puede usar la visibilidad css : oculta / visible en lugar de mostrar : ninguna / 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;
}