CSS 动画和显示无

我有一个 CSS 动画的一个 div，幻灯片后，一个设定的时间量。我想要的是一些 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，因为它更流畅，时间控制也更好一些。

EDIT

我尝试了 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;
}
395971 次浏览
小开

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

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

Or, instead of using display: none; use position: absolute; visibility: hidden; It should work.

小开
最佳答案

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/

小开

There are a few answers already, but here is my solution:

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

I use http://lesshat.com to simplify the demo, for use without this just add the browser prefixes.

(例如 -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添加到元素中，它就会淡出。

小开

以下内容将使您在下列情况下使元素具有动画效果

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

您可以设法使用 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;}
}

You might have to also set padding, margin and border to 0, or simply padding-top, padding-bottom, margin-top and margin-bottom.

我在这里更新了 Duopixel 的演示:

小开

如何让 div 在计时到来之前不占用空间(使用 CSS 计时)

Here is my solution to the same problem.

Moreover I have an onclick on the last frame loading another slideshow, and it must not be clickable until the last frame is visible.

Basically my solution is to keep the div 1 pixel high using a scale(0.001), zooming it when I need it. If you don't like the zoom effect you can restore the opacity to 1 after zooming the slide.

#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 _ 替换一个模板制作的: 我太懒了，不想在一个100 + div 的幻灯片中重新键入每个专有前缀的所有内容。

小开

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

提交答案