CSS动画和显示无

tkqqtvp1 于 2023-05-30 发布在其他

关注(0)|答案(9)|浏览(184)

我有一个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，因为它更流畅，时间控制得更好。

编辑

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

css

来源：https://stackoverflow.com/questions/13037637/css-animation-and-display-none

9条答案

按热度按时间

z8dt9xmd1#

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。
你可以在这里看到一个demo：http://jsfiddle.net/duopixel/qD5XX/

赞(0）回复(0）举报 2023-05-30

sdnqo3pr2#

现在已经有很多答案了，但以下是我的解决方案：
我使用opacity: 0和visibility: hidden。为了确保在动画之前设置visibility，我们必须设置正确的延迟。
我使用http://lesshat.com来简化演示，如果不使用这个，只需添加浏览器前缀。
(e.g. -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添加到元素中，它就会淡出。

赞(0）回复(0）举报 2023-05-30

vatpfxk53#

我遇到了同样的问题，因为只要display: x;处于动画中，它就不会动画。
我最终创建了自定义关键帧，首先更改display值，然后更改其他值。可能给予更好的解决方案。
或者，不使用display: none;，而使用position: absolute; visibility: hidden;。

赞(0）回复(0）举报 2023-05-30

d4so4syb4#

您可以使用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和margin-bottom。
我在这里更新了Duopixel的演示：http://jsfiddle.net/qD5XX/231/

赞(0）回复(0）举报 2023-05-30

tgabmvqs5#

下面的代码将让您在以下情况下为元素设置动画
1.显示-无
1.显示-块

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

赞(0）回复(0）举报 2023-05-30

7hiiyaii6#

当设置高度动画（从0到auto）时，使用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);
  }
}

赞(0）回复(0）举报 2023-05-30

rpppsulh7#

我如何让一个div不占用空间，直到它被计时进来（使用CSS计时）。
这是我对同一问题的解决方案。
此外，我在加载另一个幻灯片的最后一帧上有一个onclick，并且在最后一帧可见之前不能单击。
基本上我的解决方案是使用scale(0.001)保持div 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_替换模板：我懒得在100多个div的幻灯片中为每个专有前缀重新输入所有内容。

赞(0）回复(0）举报 2023-05-30

i7uq4tfw8#

我也有同样的问题，解决了把所有的东西都放在一个div里，加上position：relative和added position：absolute，top：0，left：0到每个子div。在你的情况下，它会像：

<div id="upper" style="position: relative">
        <div id="main-div" class="animated fadeInDownBig" style="position: absolute; left:0; top:0;"><!-- Content --></div>

        <div id="div1" style="position: absolute; left:0; top:0;""><!-- Content --></div>
        <div id="div2" style="position: absolute; left:0; top:0;""><!-- Content --></div>
        <div id="div3" style="position: absolute; left:0; top:0;""><!-- Content --></div>
    </div>

赞(0）回复(0）举报 2023-05-30

xesrikrc9#

2023年，使用CSS和Inline JS （Vanilla，没有jQuery等...）

可以使用CSS过渡，而不是使用以下命令编写动画关键帧序列：

通用技术：

在同一父<div>上使用2个类
在display: block;突变后直接开始转换：
setTimeout()，1ms延迟***或***
requestAnimationFrame()
转换后设置display: none;：
setTimeout()与transition-duration * 通过getComputedStyle() *

HTML Outline with Inline JS

<style>
  .root { 
    opacity: 0; /* etc... */
    transition: opacity 0.3s;
  }
  .root.d-none { display: none; }
  .root.show { opacity: 1; }
</style>
...
<button id="show" onclick="
  const ar = getElementById('ani-root'); 
  ar.classList.remove('d-none');
  setTimeout(() => ar.classList.add('show'),1);"
  > Show </button>
...
<button id="hide" onclick="
  const ar = getElementById('ani-root');
  const timeout = 1000 * parseFloat(
    getComputedStyle(ar).getPropertyValue('transition-duration')
  );
  ar.classList.remove('show');
  setTimeout(() => ar.classList.add('d-none'),timeout);"
  > Hide </button>
...
<div id="ani-root" class="root d-none">
  ...
</div>
...

说明

通过使用setTimeout()和1ms延迟或requestAnimationFrame()添加.show，块首先被添加到DOM，并且能够在过渡开始时使用0不透明度（等等）进行绘制，允许过渡在步骤2中发生，由.show触发。
requestAnimationFrame()在setTimeout()的Chrome和Edge中同样有效，但在Firefox中则不然; setTimeout()带有1ms延迟 *，感觉像黑客，在所有3个中工作，并镜像display: none;。
我只使用当前的浏览器（2023）进行了测试，但预计 * setTimeout() hack 应该适用于许多旧的浏览器，因为您更改为旧的JS语法而不是const和箭头（=>）函数。

赞(0）回复(0）举报 2023-05-30

我来回答

CSS动画和显示无

9条答案

2023年，使用CSS和Inline JS （Vanilla，没有jQuery等...）

通用技术：

HTML Outline with Inline JS

说明

相关问题

热门标签

最新问答