Не удалось перезапустить анимацию

Question

Я пытаюсь перезапустить анимацию css при изменении содержимого div. Я пробовал весь метод, я могу найти googling, ни один из них, похоже, не работает. Я попытался

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

Итак, когда страница загружает ДИВ отключается и test() функции работает и 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> 

Пусть я знаю, если это работает на y ОУ!