transiciones - transition css3 ejemplos




Transiciones en la pantalla: propiedad (20)

¡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!

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.


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 .


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.


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.


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

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 .


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

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.


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).


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 .


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


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.


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.


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.


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.



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

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/


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>


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




css-transitions