CSS动画和显示无

我有一个div的CSS动画，经过一定时间后会滑入。我想要几个div填充滑入的动画div的空间，然后它将这些元素向下推到页面上。

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

我如何让div在不定时的情况下不占用空间（使用CSS进行计时）。

我正在为动画使用Animate.css。

代码如下所示：

<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首先显示。然后我设置了以下延迟：

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

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

我该怎么做呢？

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

编辑

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

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

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

#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。

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

已经有一些答案，但这是我的解决方案：

我使用opacity: 0和visibility: hidden。为了确保visibility在动画之前设置，我们必须设置正确的延迟。

我使用http://lesshat.com简化了演示，无需添加浏览器前缀即可使用。

（例如-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);
    }
}

因此，只要将类添加hidden到元素中，它就会消失。

我遇到了同样的问题，因为display: x;在动画中，它不会动画。

我最终创建了自定义关键帧，首先更改了display值，然后更改了其他值。可能会提供更好的解决方案。

或者，代替使用display: none;useposition: absolute; visibility: hidden;应该起作用。

您可以通过以下方式管理纯CSS实现： 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;}
}

您可能还设置padding，margin并border为0，或者干脆padding-top，padding-bottom，margin-top和margin-bottom。

我在这里更新了Duopixel的演示：http : //jsfiddle.net/qD5XX/231/

以下内容将使您为元素添加动画

1. 显示它-无
2. 给它显示-块

的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");
}

设置高度动画时（从0到自动），使用transform: scaleY(0);的另一个有效方法是隐藏元素，而不是display: none;：

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

  &.hidden {
    transform: scaleY(0);
  }
}

我如何让div在不定时的情况下不占用空间（使用CSS进行计时）。

这是我对相同问题的解决方案。

此外，我onclick在最后一帧上有一个正在加载另一张幻灯片的幻灯片，在最后一帧可见之前，它必须不可单击。

基本上，我的解决方案是使用来保持div1像素高scale(0.001)，在需要时将其缩放。如果您不喜欢缩放效果，可以opacity在缩放幻灯片后将其恢复为1。

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

为节省字节，其他关键帧被删除。请忽略奇数编码，它是由php脚本从数组中选取值并str_replacing模板制成的：我太懒了，无法为100+ div幻灯片上的每个专有前缀重新键入所有内容。