CSS延迟淡入不占用空间

Question

我正在制作一个 css 动画(对于 Chrome 中的初学者，以避免需要重新键入一堆特定于浏览器的代码一百次)有很多事情要做:

首先同时进行这些步骤:

• 元素的子元素淡出
• 元素高度修改为固定高度
• 元素背景颜色变化

下一步:

• 淡入隐藏元素

至于我所拥有的，所有步骤 1 似乎都有效。我试图通过向元素本身添加一个类来完成这一切，但这会给第 2 步带来一些困难。因为添加类时，隐藏元素应该是 display: block;，但不幸的是，这导致它在第一步仍在进行时就已经占用了空间。

Here is a live demo .它只需要是单向的，所以你必须重新运行 fiddle 来再次尝试动画。

这是一些基本的 html:

<div class="card">
    <div class="check"><svg style='width:100px;height:100px; margin: 10px auto 10px auto; z-index:20; display: block;' viewBox='0 0 24 24'><path fill='red' d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /></svg></div>
    <div>Random content</div>
</div>

还有一部分css:

.card.done div:not(.check){
    transition: opacity .5s ease-in-out;
    opacity: 0;
}

.check:not(.done){
    display: none;
    margin: auto;
    opacity: 0;
    transition: opacity 1s 0.5s ease-in-out;
}

.check svg{
    height:100px;
    margin:10px auto 10px auto;
}

.card.done div.check{
    display: block;
    opacity: 1;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display:none;
        opacity: 0;
    }

    50% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

.card.done{
    transition: height .5s ease-in-out;
    background-color: #4CAF50;
    height: 120px !important;
}

Answer 1

我不完全确定我理解这个问题，但我认为您想要的是 SVG 元素不占用空间，您可以通过将其设为绝对位置来做到这一点

http://jsfiddle.net/p9czu73n/

.card.done div.check{
  position:absolute;
  margin-left:-50px;
  left:50%;
  ....
 }