CSS アニメーションコールバック | Brizer の Blog_html/css

CSS アニメーションコールバック | Brizer の Blog_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:50:38

オリジナル

1542 人が閲覧しました

はじめに

渡された JavaScript アニメーションはコールバック関数を使用して簡単に実装でき、アニメーションが完了した後に何をするかを実現できますが、CSS3 アニメーションは JavaScript を介してコールバックするのが困難です。この問題を解決するにはどうすればよいでしょうか?

css アニメーション

css アニメーションについては以前記事で紹介しました。ここではいくつかの基本的な使用法を示します。最初のものは単純な変換です。transform を使用するだけです。

.mydiv {    width:100px;    height:100px;    background:red;    -webkit-transition: all 2s;}.newClass {    -webkit-transform: translateY(100px)}

ログイン後にコピー

2 つ目はもう少し複雑です。自分で行う必要がありますフレームの状態を定義します:

@-webkit-keyframes mymove {    from {top:0px;}    to {top:200px;}}.mydiv {    width:100px;    height:100px;    background:red;    position:relative;    -webkit-animation:mymove 2s forwards; /* Safari and Chrome */}

ログイン後にコピー

CSS アニメーションをコールバックする方法

戻る冒頭で挙げた質問、どうやって電話をかけ直せばよいでしょうか。

最も基本的なアイデアの 1 つは、アニメーション時間がわかっているので、遅延を通じてコールバックをシミュレートできるということです。

//css中代码可以看到动画持续2svar delay = 2000;setTimeout(function(){    dosomething()}, delay);

ログイン後にコピー

しかし、より深く理解していれば、setTimeout は信頼できず、このように記述するとスケーラビリティが低すぎることがわかります。

その場合、解決策は新しいイベントtransitionEndとanimationendを渡すことです:

document.getElementById('my').addEventListener('transitionEnd', function(){    alert('Transform animation has done!');});document.getElementById('my').addEventListener('animationend', function(){    alert('Animation has done!....');});

ログイン後にコピー

以上です。もちろん、ここでは 1 つずつ紹介しませんが、animationstart、animationiteration などのイベントもあります。