5

いくつかの素晴らしい効果のためにCSS3アニメーションを使用するWebアプリに取り組んでいますが、onclickイベントでそれらをアクティブ化することがわかりません。

これはCSS3アニメーションです:(これが追加されるDIVの名前はです#smspopup）

#smspopup {    
-webkit-animation: move-sms 1.5s 1;
    -webkit-animation-fill-mode: forwards;
}

そして、これは私のJavascriptであり、それを実行するために何が必要かを理解できません。

function cancel_sms() 
{
    halte.style.opacity = 1;
    document.getElementById('smspopup').style.visibility = 'hidden';
    document.getElementById('up').style.visibility = 'visible';
}

そして、私がやりたいもう1つのことは、アニメーションが終了するまで関数を1.5秒遅らせることです。誰かアイデアはありますか？

4

1 に答える 1

3

アニメーションを開始する

IDの代わりにクラスを使用することから始めます。CSSを次のように変更します。

.smspopup {    
    -webkit-animation: move-sms 1.5s 1;
    -webkit-animation-fill-mode: forwards;
}

そして、要素に追加class=smspopupしsmspopupます。

次に、ハンドラー（cancel_sms？）内で、クラスを要素に追加してアニメーションを開始します。

document.getElementById('smspopup').className = 'smspopup';

アニメーション終了コールバック

2番目の質問（アニメーションの終わりを対象とする）には、2つのオプションがあります。

  1. transitionEndイベントにコールバックをアタッチします。これに関する唯一の問題は、ベンダー固有のイベントをリッスンする必要があることです。

    myDiv.addEventListener('webkitAnimationEnd', callback);

  2. 通常のタイムアウトを使用します。これに伴う問題は、タイミングが完全ではないことです（ただし、おそらく十分に近いです）。

    setTimeout(callback, 1500);

于 2012-08-24T14:36:11.317 に答える