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转换延迟事件。

您可以通过移除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/