アニメーション - フック関数のシミュレーションボールハーフタイムアニメーションを使用します
1 <！DOCTYPE HTML > 2 < HTML > 3 < ヘッド> 4 < メタのcharset = "UTF-8" > 5 < タイトル> </ タイトル> 6 </ ヘッド> 7 < スクリプトSRC = "../のJS / vue.js" タイプ= "テキスト/ javascriptの" 文字セット= "UTF-8" > </ スクリプト> 8 < スタイルタイプ= "テキスト/ cssの" > 高さ：15ピクセル; 11 幅：15ピクセル; 12 背景：赤。 13 境界半径：50％ 。 14 } 15 </ スタイル> 16 < ボディ> 17 < DIV ID = "アプリケーション" > 18 < 入力タイプ= "ボタン" ID = "" 値= "快到碗里来" @click = "フラグ=！フラグ" /> 1.使用遷移元素把小球包裹起来- > 20 < 遷移 21 -入る前に@ = "beforeEnter" 22 @enterは= "入力" 23 @後の入力= "afterEnterを" > 24 < DIV クラス= "ボール" V-ショー= "フラグ" > </ DIV > 25 </ 遷移> 26 27 </ DIV > 28 </ ボディ> 29 </ HTML > 30 <スクリプト> 31 VAR VM = 新しい新しいヴュー（{ 32 EL：' #app ' 、 33は データ：{ 34は フラグに：falseに 35 }、 36の 方法：{ 37 [ // 注：最初のパラメータアニメーションフック関数：ELは、アニメーションを実行することを示しDOM要素は、JSネイティブDOMオブジェクトであることが 38である beforeEnter（EL）{ 39 // 入場よいbeforeEnter、beforeEnterの場合、アニメーションがまだ始まっていない前記アニメーション、要素設定する前に 40 // アニメーションの開始前に開始しスタイル 41 @ に配置されたボールのアニメーションを開始するには、開始位置 42がある el.style.transform = "（0,0）に変換」 43は 44され 、} 45 入力{（ELを、DONE） 46である 47 // 語句ない実用的な効果が、書き込まれていない場合、実際の結果が得られない 48の // 考えることができる力をoffsetWidthアニメーションリフレッシュ 49 el.offsetWidth 50 // 映画が開始した後の入力は、あなたがの状態エンディング、アニメーションが完了した後にボールを設定することができ、スタイルを表して 51 el.style.transform = 「（150ピクセル、450px）を翻訳する」 52 // 後1Sは、実際の位置に達する 53は el.style.transition = ' すべて1 EASE ' 54である 55 //行わafterEnter基準の関数である：ここで行う機能を起動afterEnter、すなわちさ 56れる （行われる） 57は 、} 58 afterEnter（EL）{ 59 はconsole.log（「アニメーション実行終了」） 60 、この.flag = ！ これ.flag 61である } 62れる } 63である }） 64 </ スクリプト>
レンダリング
すぐに消えませんそれ以外で行われるコールを入力してください