クロムでのcssアニメーションのonclickを再開できません

Question

アニメーションの再起動に関するトピックを検索しました。これは、クラスを再度削除して追加することで実行できます。しかし、同じ方法で自分自身でテストすると、多くのブラウザで動作しないことがわかりました。エッジでのみ動作します。私が間違っていたことはありますか？私も-webkit-せずに別のキーフレームを持っていますが、同じことinside.Theアニメーションはクロームで一度トリガーんが、私はもう一度クリックすると、ナッシングが起こる

function(elem) { 
 
    elem.classList.remove("animation"); 
 
    setTimeout(function(){ 
 
    elem.classList.add("animation"); \t \t \t  
 
    elem.style.animationName = "transformOuter"; 
 
    elem.style.webkitAnimationName = "transformOuter";},1) 
 
}

div.wrapperL { 
 
    float: left; 
 
    width: 40px; 
 
    height: 38px; 
 
    background: rgb(255, 255, 255); 
 
    position: relative; 
 
    border: 1px solid white; 
 
    margin: 0 1px 5px 0; 
 
} 
 

 
div.wrapperLeft { 
 
    width: 40px; 
 
    height: 38px; 
 
    background: white; 
 
    position: relative; 
 
    border: 1px solid lightgrey; 
 
} 
 

 
div.animation {  
 
    -webkit-animation-name: none; 
 
    -webkit-animation-duration: 5s; 
 
    -webkit-animation-iteration-count: 1; 
 
    animation-name: none; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: 1; 
 
} 
 

 
@-webkit-keyframes transformOuter { 
 
    0% {background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;} 
 
    40% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;} 
 
    60% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); } 
 
    100% {width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;} 
 
}

<div class = "wrapperL"> 
 
    <div class= "wrapperLeft" onclick = functionAnime(this)></div> 
 
</div>

：ここ

はhtmlです。

Answer 1

クラスと同じようにスタイルを削除する必要があります。実際の例を参照してください。そして、あなたの関数名が間違っていました。

function functionAnime(elem) { 
 
    elem.classList.remove("animation"); 
 
    elem.style = ''; 
 
    setTimeout(function(){ 
 
    elem.classList.add("animation");     
 
    elem.style.animationName = "transformOuter"; 
 
    elem.style.webkitAnimationName = "transformOuter"; 
 
    },100) 
 
}

div.wrapperL{ 
 
float: left ; 
 
width: 40px; 
 
height: 38px; 
 
background: rgb(255, 255, 255); 
 
position: relative; 
 
border: 1px solid white; 
 
margin: 0 1px 5px 0;} 
 

 
div.wrapperLeft{ 
 

 
width: 40px; 
 
height: 38px; 
 
background: white; 
 
position: relative; 
 
border: 1px solid lightgrey; } 
 

 
div.animation{  
 
-webkit-animation-name: none; 
 
-webkit-animation-duration: 5s; 
 
-webkit-animation-iteration-count: 1; 
 
animation-name: none; 
 
animation-duration: 5s; 
 
animation-iteration-count: 1;} 
 

 
@-webkit-keyframes transformOuter{ 
 
0%  { background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;} 
 
40%  { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;} 
 
60%  { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); } 
 
100% { width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}}

<div class = "wrapperL"> 
 
    <div class= "wrapperLeft animation" onclick = functionAnime(this)></div> 
 
</div>