先日、ページとの対話中に発生する適切なアニメーションのセットを含むランディングページの作成に従事しました。 私は、問題を解決するためのクールなライブラリがあるべきだと直接感じました。 そして、私は
AniJSを見つけました。
私の意見では、これは以下の精神でアニメーションを説明するのに最適なソリューションです。
<div data-anijs="if: click, do: flipInY, to: .container-box"></div>
すべてが可能な限り直感的です。指定された
divをクリックすると、
.container-box要素で
flipInYアニメーションが実行され
ます 。
また、イベントキューを作成する可能性についても説明します。たとえば、
<div class="element1" data-anijs="if: click, do: wobble, to: .element2"> !</div> <div class="element2"> Wobble!</div> <div class="element3" data-anijs="if: animationend, on: .element2, do: hinge"> </div>
つまり、
.element1をクリックすると、
.element2の「ぐらつき」効果が適用され、その最後にブラウザウィンドウの下の境界から落ちる効果が
.element3に適用され
ます 。
一般的に、多くの興味深いことがあります！
興味のある方は
読んでください 。