100

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

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

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

8 回答 8

87

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/

于 2012-10-23T19:48:19.880 回答
38

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

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

于 2013-07-03T14:55:25.407 回答
22

我有同样的问题，因为一旦display: x;在动画中，它就不会动画。

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

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

于 2012-10-23T19:24:22.050 回答
19

您可以设法拥有一个纯 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-topand margin-bottom。

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

于 2015-02-28T11:18:30.803 回答
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");
}
于 2013-12-30T16:26:09.217 回答
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);
  }
}
于 2018-02-23T15:09:39.047 回答
1

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

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

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

基本上我的解决方案是使用 a 保持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 幻灯片上的每个专有前缀重新键入所有内容。

于 2015-04-10T15:34:26.083 回答
0 
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: display 0s, opacity 0.5s linear;
}
于 2021-07-16T22:48:53.050 回答