Pregunta Transiciones en la pantalla: propiedad


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

En el momento, parece que las transiciones CSS3 no se aplican a la propiedad 'mostrar', es decir, no puedes hacer ningún tipo de transición desde display: none a display: block (o cualquier combinación).

¿Alguien puede pensar en una forma para 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 puedes usar transiciones en el visibility: propiedad, pero no puedo pensar en una forma de utilizar eso de manera efectiva.

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

También sé 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.

Todas y todas las sugerencias son bienvenidas.


1070
2017-07-25 22:52


origen


Respuestas:


Puede concatenar dos transiciones o más, y visibility es lo que viene útil esta vez.

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 vendedor a la transition propiedad)

Más detalles están en Este artículo


1023
2017-08-04 14:58



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

Logré el efecto posicionando ambos <div>s absolutamente y configurar el oculto para opacity: 0.

Si incluso alternas el display propiedad de none a block, Tu transición en otros elementos no ocurrirá.

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

  1. Selecciona el height a 0.
  2. Selecciona el opacity a 0.
  3. Coloque el elemento fuera del marco de otro elemento que tenga overflow: hidden.

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

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

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

Debido a esto, siempre necesitará mantener el elemento display: block - pero podrías evitarlo haciendo algo como esto:

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

660
2017-07-26 04:20



En el momento de esta publicación, todos los principales navegadores desactivan las transiciones de CSS si intentas cambiar display propiedad, pero las animaciones CSS todavía funcionan bien para que podamos usarlas como una solución alternativa.

Código de ejemplo: -   (Puede aplicarlo a su menú en consecuencia) Manifestació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 aplica el fadeIn animación para el niño en el hover padre: - (y, por supuesto, establecer display: block)

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

203
2018-02-17 19:25



Sospecho que el razón que las transiciones se deshabilitan si se cambia "visualización" es debido a lo que realmente hace la visualización. Lo hace no cambiar cualquier cosa que pueda ser animada sin problemas.

"Display: none;" y "visibility: hidden;" son dos enteramente cosas diferentes. Ambos tienen el efecto de hacer que el elemento sea invisible, pero con "visibility: hidden;" todavía se representa en el diseño, pero simplemente no visiblemente asi que. El elemento oculto aún 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 elemento "mostrar" le indique que represente, y ocupa espacio en consecuencia. Otros elementos hacen no moverse automáticamente para ocupar ese espacio. El elemento oculto simplemente no representa sus píxeles reales a la salida.

"Display: none" por el contrario en realidad previene el elemento de la representación enteramente. No toma alguna 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 existía en absoluto.

"Mostrar" no es solo otro atributo visual. Establece el modo de representación completo del elemento, como si se trata de un bloque, en línea, en línea, tabla, tabla-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 forma razonable de animarlos o hacer una transición suave (¡trate de 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 desactivan si la visualización cambia (incluso si el cambio es de "ninguno" - "ninguno" no es meramente invisibilidad, es su propio modo de representación de elementos que significa que no se renderiza).


54
2018-06-15 18:55



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

Ver http://www.w3.org/TR/css3-transitions/#animatable-properties- para la lista de propiedades que pueden tener transiciones aplicadas.


41
2017-09-22 23:24



Sé que esta es una pregunta muy antigua, pero para las personas que están mirando este hilo, ahora puedes agregar una animación personalizada a la propiedad del 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;
}

Manifestación

En esta demostración, el menú secundario cambia de display:none a display:block y aún logra desvanecerse.


28
2017-07-29 20:51



De acuerdo a Proyecto de trabajo del W3C, 19 de noviembre de 2013  display no es un propiedad animable. Por suerte, 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 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 establecer visibility: hidden, entonces seguiría siendo clicable.


17
2018-02-02 14:59



Mi claro truco de JavaScript es para 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!


12
2017-12-14 21:55



Editar: 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 a través del 99% de la visualización de la animación se configura para bloquear mientras la opacidad se desvanece. En el último momento, la propiedad de visualización se establece en ninguna.

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

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

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


12
2017-10-30 05:27



Me encontré con esto hoy, con un position: fixed modal que estaba reutilizando. No pude mantenerlo display: none y luego animarlo, ya que simplemente saltó a la apariencia, yy z-index (valores negativos, etc.) también hicieron cosas raras.

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

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

Primero, tu modal oculto Observe la height es 0, y mira el height declaración en transiciones ... tiene una 500ms, que es más largo que mi opacity transición. Recuerde, esto afecta la transición de fundido 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, su modal visible. Digamos que estás configurando un .modal-active al body. Ahora el height es 100%y mi transición también ha cambiado Quiero el height para ser cambiado al instante, y el opacity tomar 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.


9
2018-04-19 18:49