アニメーションの表示/非表示onclick JavaScript

Question

divの表示/非表示のボタンを押すと以下のコードが表示されます。 div内のオブジェクトを左から右にスライドさせて、JavaScriptでアニメーションを表示したいとします。これを私のコードにどのように実装すればよいですか？そのdisplayへ

<script> 
function myFunction() { 
var x = document.getElementById("test"); 
if (x.style.display === "none") { 
    x.style.display = "block"; 
} else { 
    x.style.display = "none"; 
} 
} 
</script> 

Answer 1

は、実際に問題に示した方法でこれを解決する方法はありませんCSSアニメーション可能である属性ではありません。

この問題を解決する方法は、オブジェクトの宣言することであるmax-height又はmax-widthと0またはnullにこれらの値を設定します。 CSSではtransitionプロパティが含まれています。

もう1つの方法は、opacityの値を下げてからdisplayを適用することです。この方法では、transitionプロパティも必要です。

Answer 2

あなたはCSSアニメーションを使用できます。ここで私がやったPROJEKTの例です：

@keyframes spin { 
    0% { 
    transform:rotate(0deg); 
    } 
    100% { 
    transform:rotate(720deg); 
    } 
} 

jsのコピーでこれをアニメーションを有効にするには：

document.getElementById("your_did_id").style.animation = "spin 1.5s alternate 1";