Javascript 无法重新启动动画

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

JQUERY

JAVASCRIPT

还有一些其他方法，如将“显示”设置为“无”，然后阻止或更改animationName

这是我的密码

HTML

JAVASCRIPT

---

因此，当页面加载div时，它被禁用，

test（）

函数运行并设置div动画，但当我更改该div中的某些内容并重新运行

test（）

函数时，它不会设置动画。

我不太清楚您需要帮助的部分，所以我制作了一个工作JSFIDLE，它显示了所有的工作情况

我为div中的更改创建了一个事件侦听器，并将类“content active”添加到div中。该类添加动画名称并将显示设置为block。然后移除并重新添加该类以重新启动动画。为了让动画重新启动，我设置了10毫秒的延迟。（如果愿意，还可以克隆div）

JS:

HTML:

添加文本

---

让我知道这是否适合你

我不太清楚您需要帮助的部分，所以我制作了一个工作的JSFIDLE，它显示了所有的工作

我为div中的更改创建了一个事件侦听器，并将类“content active”添加到div中。该类添加动画名称并将显示设置为block。然后移除并重新添加该类以重新启动动画。为了让动画重新启动，我设置了10毫秒的延迟。（如果愿意，还可以克隆div）

JS:

HTML:

添加文本

---

让我知道这是否适合你

您实际上并没有在

test（）

…中切换类。这是故意的吗？我们还可以看到

buzz out

动画代码吗？@aeolingamenfel我删除了切换类代码，因为它不起作用。。。我用buzz out动画代码更新了问题，谢谢。你能用类切换代码快速创建一个JS吗？你不是真的在

test（）

中切换类……这是故意的吗？我们也能看到

发出的
动画代码吗？@aeolingamenfel我删除了切换类代码，因为它不起作用。。。我用buzz out动画代码更新了问题，谢谢。你能用类切换代码快速创建JS吗？
$("p1").removeClass("content");
$("p1").addClass("content");

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

<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>

.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);
            }
        }

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";
    }

// 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 ');
});

#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);
  }
}

<!-- 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>