javascript - CSS 转换不影响替换节点

Question

为什么 showLoadingAndResetAnimation 不能正确淡入，而 showLoading 可以？元素不是淡入，而是立即变得不透明。 https://jsfiddle.net/q56a3mjj/18/

function showLoading() {
    var elem = document.getElementsByClassName("main")[0];
    elem.style.opacity = 1;
}

/* As per css-tricks.com, I restart the animation by        *
* replacing the animated node with a deep-copy of itself    *
* https://css-tricks.com/restart-css-animation/             */
function showLoadingAndResetAnimation() {
    var elem = document.getElementsByClassName("main")[0];
    var newElem = elem.cloneNode(true);
    elem.parentNode.replaceChild(newElem, elem);
    newElem.style.opacity = 1;
}

编辑:我认为发生这种情况是因为浏览器从未将 newElem 视为具有 opacity: 0，因此它认为它不会从 0 过渡。添加 20 毫秒的超时有效。

Answer 1

因为您正在创建一个元素(替换原来的元素)并且 CSS3 transition-delay 事件将在元素生效后触发。

你可以通过删除你的 javascript 来制作你想要的动画并使用它:

@keyframes moveRight {
    0%   {left: 0; opacity : 0}
    50%   {opacity : 1}
    99% {left: 650px; opacity : 0}
    100% {left:0; opacity: 0;}
}

https://jsfiddle.net/q56a3mjj/33/