javascript - 无法重新启动动画

Question

当 div 的内容更改时，我尝试重新启动 css 动画。我已经尝试了所有我能找到的方法，谷歌搜索似乎都不起作用。我已经尝试过

JQUERY

$("p1").removeClass("content");
$("p1").addClass("content");

JAVASCRIPT

var elm = this,
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);

以及其他一些方法，例如将显示设置为无，然后阻止或更改animationName

这是我的代码

HTML

<div id="content">
    <div class="content" id="p1">
        <div class="person"></div>
        <img src="img/saying.png" class="statusclound"/>
        <p class="status"></p>
        <img class="frame" src="img/splash_1.png" id="frame_1"/>

    </div>
</div>

CSS

.content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;

            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }

@keyframes buzz-out {
            10% {
                -webkit-transform: translateX(3px) rotate(2deg);
                transform: translateX(3px) rotate(2deg);
            }
            20% {
                -webkit-transform: translateX(-3px) rotate(-2deg);
                transform: translateX(-3px) rotate(-2deg);
            }
            30% {
                -webkit-transform: translateX(3px) rotate(2deg);
                transform: translateX(3px) rotate(2deg);
            }
            40% {
                -webkit-transform: translateX(-3px) rotate(-2deg);
                transform: translateX(-3px) rotate(-2deg);
            }
            50% {
                -webkit-transform: translateX(2px) rotate(1deg);
                transform: translateX(2px) rotate(1deg);
            }
            60% {
                -webkit-transform: translateX(-2px) rotate(-1deg);
                transform: translateX(-2px) rotate(-1deg);
            }
            70% {
                -webkit-transform: translateX(2px) rotate(1deg);
                transform: translateX(2px) rotate(1deg);
            }
            80% {
                -webkit-transform: translateX(-2px) rotate(-1deg);
                transform: translateX(-2px) rotate(-1deg);
            }
            90% {
                -webkit-transform: translateX(1px) rotate(0deg);
                transform: translateX(1px) rotate(0deg);
            }
            100% {
                -webkit-transform: translateX(-1px) rotate(0deg);
                transform: translateX(-1px) rotate(0deg);
            }
        }

JAVASCRIPT

function test() {
        var currentPatch = document.getElementById("p" + patchTurn);           

        currentPatch.getElementsByClassName("person")[0].style.backgroundImage = "url(http://localhost:80/slingshot/uploads/" + jsonData[3] + ")";
        currentPatch.getElementsByClassName("status")[0].innerHTML = jsonData[2];
        currentPatch.getElementsByClassName("frame")[0].src = "img/splash_" + randomFrame + ".png";
        currentPatch.style.animationName = "buzz-out";
        currentPatch.style.display = "block";
    }

因此，当页面加载时，div 被禁用，test() 函数运行并且 div 动画，但是当我更改该 div 内的某些内容并重新运行 test()它不动画的功能。

Answer 1

我不太清楚您需要帮助的部分，因此我制作了一个工作 JSfiddle 来显示所有内容的工作情况。

我为 div 中的更改创建了一个事件监听器，并将“content-active”类添加到了 div 中。此类添加动画名称并将显示设置为阻止。然后删除并重新添加该类以重新启动动画。为了让动画重新启动，我设置了 10 毫秒的延迟。 (如果您愿意，您也可以克隆 div)

https://jsfiddle.net/heraldo/zyjuoLt1/

JS:

// watch for changes in the DOM
$('#content').bind("DOMSubtreeModified",function(){
    // clear any previous animation
    $("#p1").removeClass("content-active");
  // setting a timeout allows the animation to restart
  // NOTE, you can also clone the element and re-add it to do
  // the same thing.
  setTimeout(function(){ $("#p1").addClass("content-active"); }, 10);
});

// simply adds text to the status <p>
$('#modify').click(function(){
    $(".person").append('text ');
});

CSS:

#content {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.content-active{
  display: block;
  animation-name: buzzOut;
}



@keyframes buzzOut {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0deg);
    transform: translateX(1px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0deg);
    transform: translateX(-1px) rotate(0deg);
  }
}

HTML:

<!-- simply adds text to the div -->
<button id="modify">Add Text</button> 

<div id="content">
  <div class="content" id="p1">
    <div class="person"></div>
    <p class="status"></p>
  </div>
</div>

请告诉我这是否适合您!