Animación y visualización CSS Ninguno

83

Tengo una animación CSS para un div que se desliza después de un período de tiempo determinado. Lo que me gustaría es que algunos divs llenen el espacio del div animado que se desliza, que luego empujará esos elementos hacia abajo en la página.

Cuando intento esto al principio, el div que se desliza todavía ocupa espacio incluso cuando no es visible. Si cambio el div a display:nonediv no se desliza en absoluto.

¿Cómo puedo hacer que un div no ocupe espacio hasta que esté programado para entrar (usando CSS para el tiempo)?

Estoy usando Animate.css para las animaciones.

Así es como se ve el código:

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

Como muestra el código, me gustaría que el div principal estuviera oculto y los otros divs se mostraran al principio. Entonces tengo el siguiente retraso establecido:

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

Es en ese punto que me gustaría que el div principal empujara a los otros divs hacia abajo a medida que entra.

¿Cómo hago esto?

Nota: he considerado usar jQuery para hacer esto, sin embargo, prefiero usar estrictamente CSS ya que es más suave y el tiempo está un poco mejor controlado.

EDITAR

Intenté lo que sugirió Duopixel, pero entendí mal y no lo estoy haciendo correctamente o no funciona. Aquí está el código:

HTML

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

CSS

#main-image{
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
    height: 375px;
}
L84
fuente

Respuestas:

76

CSS (o jQuery, para el caso) no puede animar entre display: none;y display: block;. Peor aún: no puede animar entre height: 0y height: auto. Por lo tanto, debe codificar la altura (si no puede codificar los valores, entonces debe usar javascript, pero esta es una pregunta completamente diferente);

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

Mencionas que estás usando Animate.css, con el que no estoy familiarizado, así que este es un CSS de vainilla.

Puede ver una demostración aquí: http://jsfiddle.net/duopixel/qD5XX/

metodofaccion
fuente
Gracias por la ayuda, no funciona o no lo tengo correcto. Ver mi edición de mi pregunta.
L84
Lo siento, estaba pensando en las transiciones CSS cuando escribí eso (es mucho más simple por cierto), actualicé el código para la sintaxis de la animación
Methodofaction
¡Hermoso! Funciona de maravilla. ¡Gracias! Debería consultar Animate.css, una herramienta muy útil para animaciones.
L84
No puedo codificar la altura, ¿cuál sería la mejor manera de hacerlo usando javascript?
Raphael Isidro
4
if you can't hard code the values then you need to use javascript. Eso está mal. Puede animar la propiedad max-height, con un valor mayor de lo que espera que sea el cuadro y funciona bien.
ssc-hrep3
31

Ya hay algunas respuestas, pero aquí está mi solución:

Yo uso opacity: 0y visibility: hidden. Para asegurarnos de que visibilityesté configurado antes de la animación, tenemos que configurar los retrasos correctos.

Utilizo http://lesshat.com para simplificar la demostración, para usar sin esto, solo agregue los prefijos del navegador.

(por ejemplo -webkit-transition-duration: 0, 200ms;)

.fadeInOut {
    .transition-duration(0, 200ms);
    .transition-property(visibility, opacity);
    .transition-delay(0);

    &.hidden {
        visibility: hidden;
        .opacity(0);
        .transition-duration(200ms, 0);
        .transition-property(opacity, visibility);
        .transition-delay(0, 200ms);
    }
}

Tan pronto como agregue la clase hiddena su elemento, se desvanecerá.

Fabian Vogelsteller
fuente
8
¡GUAUU! Usé esto como: .default { opacity: 0; visibility: hidden; top: -10px; transition-duration: 200ms, 200ms, 0; transition-property: opacity, top, visibility; transition-delay: 0, 0, 200ms; } - .hidden { opacity: 1; visibility: visible; top: 0px; transition-duration: 200ms, 200ms, 0; transition-property: opacity, top, visibility; transition-delay: 200ms, 200ms, 0; } para crear un efecto de "gota", ¡funcionó muy bien! me encanta @frozeman, gracias !!
simey.me
4
bien, ha ocultado el elemento, pero como dice la respuesta aceptada, no ha animado desde la pantalla: ninguno; y pantalla: bloque; por lo que su elemento sigue ocupando espacio en la página
svnm
2
la animación display: noneno es posible.
Fabian Vogelsteller
Cuando oculta un elemento con opacidad o visibilidad, todavía está allí, por lo que si tiene, por ejemplo, enlaces dentro, aún se podrá hacer clic en ellos. Para evitar esto, puede usar pointer-events: none;. Esto deshabilita cualquier interacción con el cursor del mouse.
pol_databender
6
visibility: hiddenocúpate de eso, no necesitaspointer-events: none;
Edu Ruiz
16

Tuve el mismo problema, porque tan pronto como display: x;esté en animación, no se animará.

Terminé creando fotogramas clave personalizados, primero cambiando el displayvalor y luego los otros valores. Puede dar una mejor solución.

O, en lugar de usar display: none;use position: absolute; visibility: hidden;It debería funcionar.

tobspr
fuente
13

Puede lograr tener una implementación CSS pura con max-height

#main-image{
    max-height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from {max-height: 0;}
  to {max-height: 500px;}
}

Puede que tenga que establecer también padding, marginy borderen 0, o simplemente padding-top, padding-bottom, margin-topy margin-bottom.

Actualicé la demostración de Duopixel aquí: http://jsfiddle.net/qD5XX/231/

oliverpool
fuente
5

Lo siguiente le permitirá animar un elemento cuando

  1. Darle una pantalla - Ninguno
  2. Darle una pantalla - Bloque

CSS

.MyClass {
       opacity: 0;
       display:none;
       transition: opacity 0.5s linear;
       -webkit-transition: opacity 0.5s linear;
       -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
       -ms-transition: opacity 0.5s linear;
 }

JavaScript

function GetThisHidden(){
    $(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation);
}

function GetThisDisplayed(){
    $(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend");
}

function HideTheElementAfterAnimation(){
    $(".MyClass").css("display", "none");
}
Mahesh
fuente
3

Al animar la altura (de 0 a automático), usar transform: scaleY(0);es otro enfoque útil para ocultar el elemento, en lugar de display: none;:

.section {
  overflow: hidden;
  transition: transform 0.3s ease-out;
  height: auto;
  transform: scaleY(1);
  transform-origin: top;

  &.hidden {
    transform: scaleY(0);
  }
}
Jesper N
fuente
1
¡Sí, pero eso deja el espacio vacío!
Hafiz Temuri
0

¿Cómo puedo hacer que un div no ocupe espacio hasta que esté programado para entrar (usando CSS para el tiempo)?

Aquí está mi solución al mismo problema.

Además, tengo un onclicken el último fotograma cargando otra presentación de diapositivas, y no se debe poder hacer clic hasta que el último fotograma sea visible.

Básicamente, mi solución es mantener el div1 píxel alto usando un scale(0.001)zoom cuando lo necesito. Si no le gusta el efecto de zoom, puede restaurarlo opacitya 1 después de hacer zoom en la diapositiva.

#Slide_TheEnd {

    -webkit-animation-delay: 240s;
    animation-delay: 240s;

    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;

    -moz-animation-duration: 20s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;

    -moz-animation-name: Slide_TheEnd;
    -webkit-animation-name: Slide_TheEnd;
    animation-name: Slide_TheEnd;

    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    animation-direction: normal;

    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    transform: scale(0.001);
    background: #cf0;
    text-align: center;
    font-size: 10vh;
    opacity: 0;
}

@-moz-keyframes Slide_TheEnd {
    0% { opacity: 0;  transform: scale(0.001); }
    10% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { opacity: 0;  transform: scale(0.001); }
}

Otros fotogramas clave se eliminan por el bien de los bytes. Por favor, ignore la codificación extraña, está hecha por un script php que selecciona valores de una matriz y str_replacing una plantilla: Soy demasiado vago para volver a escribir todo para cada prefijo propietario en una presentación de diapositivas de más de 100 divs.

Marco Bernardini
fuente