CSS 动画和显示无

Question

提问by L84

I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page.

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

When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to display:nonethe div doesn't slide in at all.

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

How do I have a div not take up space until it is timed to come in (using CSS for the timing.)

我如何让 div 不占用空间，直到定时进来（使用 CSS 进行计时。）

I am using Animate.css for the animations.

我正在使用 Animate.css 制作动画。

Here is what the code looks like:

下面是代码的样子：

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set:

正如代码所示，我希望主 div 被隐藏，而其他 div 首先显示。然后我设置了以下延迟：

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

It is at that point that I would like the main div to push the other divs down as it comes in.

正是在这一点上，我希望主 div 在进入时将其他 div 向下推。

How do I do this?

我该怎么做呢？

Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled.

注意：我已经考虑使用 jQuery 来做到这一点，但是我更喜欢严格使用 CSS，因为它更流畅，而且时间控制得更好。

EDIT

编辑

I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn't work. Here is the code:

我已经尝试了 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

回答by methodofaction

CSS (or jQuery, for that matter) can't animate between display: none;and display: block;. Worse yet: it can't animate between height: 0and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);

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

You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.

你提到你正在使用 Animate.css，我不熟悉它，所以这是一个普通的 CSS。

You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/

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

Answer 2

回答by Fabian Vogelsteller

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

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

I use opacity: 0and visibility: hidden. To make sure that visibilityis set before the animation, we have to set the right delays.

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

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

我使用http://lesshat.com来简化演示，如果没有这个，只需添加浏览器前缀即可。

(e.g. -webkit-transition-duration: 0, 200ms;)

（例如-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);
    }
}

So as soon as you add the class hiddento your element, it will fade out.

因此，只要将类添加hidden到元素中，它就会淡出。

Answer 3

回答by tobspr

I had the same problem, because as soon as display: x;is in animation, it won't animate.

我遇到了同样的问题，因为一旦display: x;进入动画，它就不会动画。

I ended up in creating custom keyframes, first changing the displayvalue then the other values. May give a better solution.

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

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

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

Answer 4

回答by oliverpool

You can manage to have a pure CSS implementation with max-height

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

You might have to also set padding, marginand borderto 0, or simply padding-top, padding-bottom, margin-topand margin-bottom.

您可能还必须将padding,margin和设置border为 0，或者简单地将padding-top、padding-bottom、margin-top和设置为margin-bottom。

I updated the demo of Duopixel here : http://jsfiddle.net/qD5XX/231/

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

Answer 5

回答by Mahesh

The following will get you to animate an element when

以下内容将使您在以下情况下为元素设置动画

Giving it a Display - None
Giving it a Display - Block

给它一个显示器 - 无
给它一个显示 - 块

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

回答by Jesper Lehtinen

When animating height (from 0 to auto), using transform: scaleY(0);is another useful approach to hide the element, instead of display: none;:

当动画高度（从 0 到自动）时， usingtransform: 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 7

回答by Marco Bernardini

How do I have a div not take up space until it is timed to come in (using CSS for the timing.)

我如何让 div 不占用空间，直到定时进来（使用 CSS 进行计时。）

Here is my solution to the same problem.

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

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

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

Basically?my solution is to keep the div1 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 opacityto 1 after zooming the slide.

基本上？我的解决方案是div使用 a保持1 像素高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); }
}

Other keyframes are removed for the sake of bytes. Please disregard the odd coding, it is made by a php script picking values from an array and str_replacing a template: I'm too lazy to retype everything for every proprietary prefix on a 100+ divs slideshow.

为了字节，删除了其他关键帧。请忽略奇怪的编码，它是由一个 php 脚本从数组中选取值和 str_replacing 模板生成的：我懒得为 100 多个 div 幻灯片上的每个专有前缀重新键入所有内容。

CSS 动画和显示无

提问by L84

回答by methodofaction

回答by Fabian Vogelsteller

回答by tobspr

回答by oliverpool

回答by Mahesh

回答by Jesper Lehtinen

回答by Marco Bernardini

相关推荐

最近更新

标签

CSS 动画和显示 无

提问by L84

回答by methodofaction

回答by Fabian Vogelsteller

回答by tobspr

回答by oliverpool

回答by Mahesh

回答by Jesper Lehtinen

回答by Marco Bernardini

相关推荐

用 CSS 截断长字符串：可行吗？

CSS 强制调整图像大小并保持纵横比

如何在 ruby​​ on rails 应用程序中使用 CSS？

悬停时 CSS 过渡淡入淡出

相关推荐

最近更新

标签

CSS 动画和显示无

如何在 ruby on rails 应用程序中使用 CSS？