Question

我有一个用于div的CSS 3动画，它会在一段时间后滑入。我想要的是几个div来填充滑动的动画div的空间，然后它会将这些元素推向页面。

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

如果有时间进入（使用CSS进行计时），我如何让div不占用空间。

我正在使用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

您可以设法使用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和{ {1}}。

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

Answer 5

以下内容可让您在

时为元素设置动画

给它一个显示 - 无
给它一个显示 - 阻止

<强> 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

当设置动画高度（从0到自动）时，使用SELECT DISTINCT ci.CatalogItemID AS EID FROM LodgingCatalogMaster.[dbo].[CatalogItem] ci LEFT JOIN LodgingCatalogMaster.[dbo].[CatalogItemAttribute] cia ON ci.catalogitemid = cia.catalogitemid WHERE ci.[TableTypeID] = 1 AND ci.catalogitemid NOT IN (SELECT cia.CatalogItemID FROM LodgingCatalogMaster.[dbo].[CatalogItemAttribute] cia WHERE cia.attributeID IN (2001, 361, 1073742653)) AND ci.TableTypeID = 1 AND ci.CatalogItemStatusTypeID = 1 LEFT JOIN LodgingCatalogMaster.[dbo].[SKUGroupBusinessModel] skugbm ON ci.catalogitemid = skugbm.SkuGroupCatalogItemID WHERE skugbm.MerchantContract = 1 OR skugbm.DirectAgencyContract = 1;是隐藏元素的另一种有用方法，而不是transform: scaleY(0);：

display: none;

Answer 7

如果有时间进入（使用CSS进行计时），我如何让div不占用空间。

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

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

基本上我的解决方案是使用div保持scale(0.001) 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+ divs幻灯片上的每个专有前缀重新输入所有内容。

Answer 8

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

CSS3动画和显示无

8 个答案: