javascript - 如何防止 CSS 动画在显示属性更改时重新运行？

Question

给定一个具有更改 opacity 的 CSS 动画的元素，为什么当 display 属性更改时动画会重新运行？我该如何阻止这种情况发生？

示例代码:

HTML

<div class="foo"></div>

CSS

@-webkit-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.foo {
    background-color: red;
    width: 200px;
    height: 200px;
    -webkit-animation: fade-in 600ms forwards 0ms ease;
}

.hidden {
    display: none;
}

JS

$(function () {
    $(".btn").click(function (e) {
        e.preventDefault();
        $(".foo").toggleClass("hidden")
    })
})

JSFiddle

我期望看到的行为是动画在 DOM 呈现时运行，但在显示属性更改时不会重新运行。

Answer 1

一种方法是在单击按钮时添加一个类来覆盖动画属性。

FIDDLE

$(function () {
    $(".btn").click(function (e) {
        e.preventDefault();
        $(".foo").addClass('finished').toggleClass("hidden")
    })
})

.foo.finished {
    -webkit-animation: none;
}

---

另一种选择是使用 position: relative 隐藏它，而不是更改 display:

FIDDLE

.hidden {
    position: absolute;
    left: -99999px;
}