Question

我正在尝试创建一个分解，我通过设置如下的animation属性来实现：

var element = getElementById("myEl");
element.style.animation = "fadein 0.3s ease-out";

然后使用display属性使其可见：

var element = getElementById("myEl");
element.style.display = "block";

但是当我将display设置为display: none时，它不会消失：

var element = getElementById("myEl");
element.style.display = "none";

有没有一种设置CSS的方法，以使其淡出和淡入？

这是我的淡出动画，当我尝试使用它时，它会使页面崩溃（因为该元素不可见）：

@keyframes fadeout {

    100% {
        opacity: 1;
    }
    0% {
        opacity: 0;
    }

}

更新：
暂停和播放动画选项在哪里？如果播放了动画，如何再次播放？很奇怪，因为没有play（），pause（）和reverse（）方法。

这是我要做的是让它播放一次后反转播放。换句话说，在淡入后淡出：

var style = overlay.style;
var animation = null;
style.animationPlayState = "paused";

if (style.animation) {
    animation = style.animation;
    style.animation = null;
    style.animationPlayState = "paused";
    overlay.addEventListener("animationend", function(event) {
        log("animation ended");
        overlay.removeEventListener("animationend", arguments.callee);
    });

    setTimeout(function() {
        style.animation = animation;
        style.animationPlayState = "paused";
        style.animationDirection = "reverse";
        style.animationPlayState = "running";
    }, 30);
}

如何创建CSS溶解动画？

0 个答案: