アニメーションを再起動できません

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

noneにディスプレイを設定し、ブロックまたは変更するようないくつかの他の方法を試みましたここに

が私のコードである

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の変更のイベントリスナーを作成し、divに「content-active」クラスを追加しました。このクラスはアニメーション名を追加し、表示をブロックに設定します。その後、クラスが削除され、再追加されてアニメーションが再開されます。アニメーションを再開するには、10msの遅延を設定します。

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

レッツ

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

JS（あなたがしたい場合にも、divのクローンを作成することができます）私はこれがyのために働くか知っているああ！