AniJS-CSSアニメーションの宣言的記述のためのライブラリ

先日、ページとの対話中に発生する適切なアニメーションのセットを含むランディングページの作成に従事しました。 私は、問題を解決するためのクールなライブラリがあるべきだと直接感じました。 そして、私は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に適用されます 。



一般的に、多くの興味深いことがあります！

興味のある方は読んでください 。