CSS 动画和显示 无

Question

我有一个 div 的 CSS 动画，它会在一段时间后滑入。我想要一些 div 来填充滑入的动画 div 的空间，然后它将这些元素推到页面下方。

当我第一次尝试这个时，即使它不可见，滑入的 div 仍然会占用空间。如果我将 div 更改为 display:none，则 div 根本不会滑入。

如何让一个 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;
}

Answer 1

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: display 0s, opacity 0.5s linear;
}

Answer 2

您可以使用max-height 实现纯 CSS

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

Answer 3

当动画高度（从 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);
  }
}

Answer 4

如何让一个 div 在定时进入之前不占用空间（使用 CSS 进行定时。）

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

此外，我在加载另一个幻灯片的最后一帧上有一个onclick，并且在最后一帧可见之前不能点击它。

基本上，我的解决方案是使用 scale(0.001) 将 div 保持 1 像素高，并在需要时进行缩放。如果您不喜欢缩放效果，可以在缩放幻灯片后将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 幻灯片上的每个专有前缀重新键入所有内容。

Answer 5

以下内容将让您为元素设置动画

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

Answer 6

我遇到了同样的问题，因为只要display: x; 处于动画状态，它就不会动画。

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

或者，而不是使用display: none; 使用position: absolute; visibility: hidden; 它应该可以工作。

Answer 7

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

我使用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 类添加到元素，它就会淡出。

Answer 8

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/