JS onclick div消失，直到播放動畫

我有一個object1和object2。JS onclick div消失，直到播放動畫

object1與delay: 0s

object2動畫已與delay: 0.5s

動畫當你點擊，這兩個對象正確地分配.animation，但0.5秒後object2，whitch就是我想要的，一切都很順利。

但現在的問題是，當你點擊2.，對象分配.animation-back，object1做他的事正常，但object2消失爲0.5秒，之後他做的動畫。

我大概知道，這是因爲還準備卸下.animation類，它在等待「玩」 .animation-back，但是當我刪除.removeClass('animation-back')，等等...，它會跳進某種循環或者我怎麼能叫它，你可以自己嘗試。

$(".text1").click(function(){ 
 
    $(".object1").addClass('animation').removeClass('animation-back'); 
 
    $(".object2").addClass('animation').removeClass('animation-back'); 
 
}); 
 
$(".text2").click(function(){ 
 
    $(".object1").addClass('animation-back').removeClass('animation'); 
 
    $(".object2").addClass('animation-back').removeClass('animation'); 
 
});

a{ 
 
    font-size:150%; 
 
} 
 
.text1{ 
 
    cursor:pointer; 
 
    margin-left:42px; 
 
    font-size:150%; 
 
} 
 
.text2{ 
 
    cursor:pointer; 
 
    margin-left:42px; 
 
    font-size:150%; 
 
} 
 
.object1{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    margin:2em; 
 
    margin-left: 150px; 
 
    position: relative; 
 
    opacity: 0; 
 
} 
 
.object1.animation{ 
 
    animation: animation1 0.7s ease-in-out 0s 1 forwards; 
 
} 
 
.object1.animation-back{ 
 
    animation: animation2 0.7s ease-in-out 0s 1 forwards; 
 
} 
 
.object2{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    margin:2em; 
 
    margin-left: 150px; 
 
    position: relative; 
 
    opacity: 0; 
 
} 
 
.object2.animation{ 
 
    animation: animation1 0.7s ease-in-out 0.5s 1 forwards; 
 
} 
 
.object2.animation-back{ 
 
    animation: animation2 0.7s ease-in-out 0.5s 1 forwards; 
 
} 
 

 
@keyframes animation1 { 
 
    from { margin-left: 150px; opacity: 0; } 
 
    to { margin-left: 0px; opacity: 1; } 
 
} 
 
@keyframes animation2 { 
 
    from { margin-left: 0px; opacity: 1; } 
 
    to { margin-left: 150px; opacity: 0; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text1"><a>1.</a></div> 
 
<div class="text2"><a>2.</a></div> 
 
<div class="object1"></div> 
 
<div class="object2"></div>

感謝意見，有一個愉快的一天！

來源

2016-03-22 Honzis Novák

請直接在你的問題顯示相關的代碼。 – nnnnnn

不確定預期的結果是什麼？ – guest271314

@ guest271314預期的結果是第二個方框在動畫到右邊之前不會消失。 –

問題是您的默認類正在使框不透明度爲0，並且您的動畫延遲了.5秒，因此它在不透明度回到1之前需要半秒。只更新對象2類以包括默認狀態反對

.object2.animation-back { 
    opacity: 1; 
    margin-left: 0px; 
    animation: animation2 0.7s ease-in-out 0.5s 1 forwards; 
}

來源

2016-03-22 23:05:51 d3l33t

你在這裏，我的救世主，非常感謝！祝你今天愉快！ :) –

您設置animation-fill-mode到forwards，這隻會維持最後動畫狀態（結束後）。如果要，只要它被施加到元件顯示初始狀態，對於forwards和backwards設置animation-fill-mode到backwards（或both。

.object2.animation-back { 
    animation: animation2 0.7s ease-in-out 0.5s 1 both; 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

作爲注意，你可能會發現值得使用一個關鍵幀集合，並且設置animation-direction到reverse來反轉動畫ñ。

.object2.animation { 
    animation: animation1 0.7s ease-in-out 0.5s 1 both; 
} 
.object2.animation-back { 
    animation: animation1 0.7s ease-in-out 0.5s 1 reverse both; 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

來源

2016-03-22 23:28:09 darrylyeo

JS onclick div消失，直到播放動畫

回答

相關問題