無法重新啓動chrome的css動畫onclick

我搜索關於重新啓動動畫的主題，可以通過刪除並重新添加類來完成。但是當我用相同的方法自己測試它時，我發現它在許多瀏覽器中都不起作用。它只能在Edge中工作。有什麼我做錯了嗎？無法重新啓動chrome的css動畫onclick

下面是HTML：

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>

我也有另外一個關鍵幀，而不-webkit-但同樣的事情。裏面的動畫就在鉻觸發一次，但是當我再次點擊，沒有任何事情發生。

來源

2017-09-07 Jamil Tang

有一個在你的JavaScript錯誤你的函數是'functionAnime（本）'，但你已呼籲在JavaScript的變化，爲'函數functionAnime'and'功能function'如果didnt鍛鍊再試試添加一些工作小提琴與適當的解釋你的情況 –

你必須刪除樣式，就像你用class做的一樣，看到工作的例子：是的，你的函數名不正確我認爲這是一個錯字。

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>

來源

2017-09-07 06:51:51 adda82

無法重新啓動chrome的css動畫onclick

回答

相關問題