CSS动画和显示无 [英] CSS Animation and Display None

问题描述

我有一个div的CSS动画，该动画会在设置的时间后滑入.我想要几个div填充滑入的动画div的空间，然后它将这些元素向下推入页面.

I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page.

当我在第一个div尝试此操作时，即使看不见，在幻灯片中仍会占用空间.如果我将div更改为display:none，则div根本不会滑入.

When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to display:none the div doesn't slide in at all.

我该如何让div在不定时的情况下不占用空间(使用CSS进行计时).

How do I have a div not take up space until it is timed to come in (using CSS for the timing.)

我正在使用Animate.css制作动画.

I am using Animate.css for the animations.

代码如下:

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

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

如代码所示，我希望隐藏主div，而其他div首先显示.然后设置了以下延迟:

As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set:

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

正是在这一点上，我希望主div在出现其他div时将其向下推.

It is at that point that I would like the main div to push the other divs down as it comes in.

我该怎么做?

注意:我已经考虑过使用jQuery来做到这一点，但是我更喜欢使用严格的CSS，因为它更平滑并且可以更好地控制时间.

Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled.

EDIT

EDIT

我尝试了Duopixel的建议，但是我误解了而未正确执行此操作，或者它不起作用.这是代码:

I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn't work. Here is the code:

HTML

HTML

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

CSS

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

推荐答案

CSS(或jQuery)无法在display: none;和display: block;之间进行动画处理.更糟糕的是:它无法在height: 0和height: auto之间进行动画处理.因此，您需要对高度进行硬编码(如果无法对值进行硬编码，则需要使用javascript，但这是一个完全不同的问题)；

CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);

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

您提到您正在使用Animate.css(我不熟悉)，因此这是普通CSS.

You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.

您可以在此处查看演示: http://jsfiddle.net/duopixel/qD5XX/

You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/

这篇关于CSS动画和显示无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！