Question

我想将display：none属性添加到关键帧 - 动画的结尾。像这样：

.sw_intro{
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0;display: block;}
    100%{display: none;margin-top: 100vh;}
}

但是display：none-property不会被使用。我认为这不是我的“代码”的错误，而是一些不允许/不可行的错误。虽然我想在动画结束时有这种效果，但它必须像display：none effect，not opacity：0;

我怎么做/实现呢？用jquery代替？

谢谢！

Answer 1

display不是可以处理动画的属性。您可以将尺寸（height或width）更改为0，并将overflow:hidden;设置为元素。这样，页面中的元素就会有效丢失。

.sw_intro{
    display:block;
    overflow:hidden;
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0; width:inherit; height:inherit;}
    100%{margin-top: 100vh; width:0; height:0;}
}

Answer 2

使用jQuery：

您最初的CSS：

 .sw_intro {
    display:block;
    margin-top: 0;
    width: inherit;
    height: inherit;
    opacity: 1;
}

你的jQuery：

$( ".sw_intro" ).animate({
    marginTop: "100vh",
    opacity: 0
}, 800, function() {
    // Animation complete.
    $('.sw_intro').hide();
});

如何在css-animation的末尾使用display：none

2 个答案: