CSS3动画和显示无

Question

我有一个CSS 3动画的div在一段时间后滑入.我想要的是几个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;
}

Answer 1

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,所以这是一个vanilla CSS.

你可以在这里看到一个演示:http://jsfiddle.net/duopixel/qD5XX/

Answer 2

已经有几个答案,但这是我的解决方案:

我用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 3

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

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

或者,而不是display: none;使用position: absolute; visibility: hidden;它应该工作.

Answer 4

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

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

[因为我没有足够的声誉评论他的回答]

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