Question

我正在制作一个css动画（仅限Chrome中的初学者，以避免需要重复输入一百次特定于浏览器的代码），并进行了大量工作：

首先同步这些步骤：

元素之子淡出
元素高度更改为修复高度
元素更改的背景颜色

下一步：

淡入隐藏元素

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

Here is a live demo。它只需要单向，所以你必须重新运行小提琴再次尝试动画。

这是一些基本的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

只需使用：

$(".card").css("height", "auto");

或使用添加 height:auto;到.card类

一切都会好的

CSS延迟了淡入而没有占用空间

1 个答案: