web-dev-qa-db-ja.com

Animate.cssおよびAngular 4

私は少し調べましたが、AngularでAnimate.cssアニメーションを機能させる簡単な方法は本当にないようです。つまり、アニメーションは基本的にAnimate.cssライブラリから削除して、Angularアニメーションに変換する必要があります。

不足しているものや、このトピックで不足しているリソースはありますか？それ以外の場合、Angular 4で箱から出して動作する他のアニメーションライブラリがありますか？

cssangularanimationanimate.css
9
QuietSeditionist
  1. Npm npm install animate.css --saveを介してanimate.cssをインストールします
  2. .angular-cli.jsonに"../node_modules/animate.css/animate.css",を追加します-またはAngular 6+を使用している場合、yourまたはangular.jsonに"/node_modules/animate.css/animate.css",を追加します- styles.cssの上の"styles"配列（以下の例を参照）。
  3. ローカルサーバーを再起動し、ブラウザを更新します。 ng serve

例：

"styles": [
    "../node_modules/animate.css/animate.css",
    "styles.css"
  ],
10
Darryl Mendonez

今年のHacktoberfestの結果、私はすべてのアニメーションをAnimate.cssを作成し、Angularライブラリを作成しました。このライブラリは、animate.cssが動的パラメータを使用する可能性で行うことをすべて実行します。AOTおよびJITコンパイルの両方をサポートします。

ここで私のデモを見ることができます： https://filipows.github.io/angular-animations/ そして、あなたがどう思うか教えてください。

ここで遊ぶStackblitzは次のとおりです。 https://stackblitz.com/edit/angular-animations-lib-demo

基本的に、ブール値でトリガーできます：

<div [@bounce]="booleanValue"> </div>

または、要素がDOMに出入りするとき：

<div [@fadeInDownOnEnter] [@fadeOutOnLeave]> </div>

そして、テンプレートからパラメータ化できます：

<div [@fadeInDownOnEnter]="{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }" </div>

必要なことは、コンポーネントファイルにアニメーションをインポートし、コンポーネントデコレータのアニメーションに追加することだけです。

@Component({
  ...
  animations: [
    fadeInDownOnEnterAnimation()
  ]
})

そこにパラメーターを使用することもできますが、テンプレート内のパラメーターのように動的に変更することはできません。

@Component({
  ...
  animations: [
    fadeInDownOnEnterAnimation({ anchor: 'customAnchor', duration: 300, delay: 0, translate: '3000px' })
  ]
})
18
filipows

Npmからanimate.cssをインストールします-

npm install animate.css --save

次に、angular-cli.jsonを追加します。

"../node_modules/animate.css/animate.min.css"

そして最後に、

@import '~animate.css/animate.min.css';
7
Gudvit

私はこのCSSライブラリをAngular 4で動作させようとしていた次に、対応するクラスを要素に追加します。

編集：これはあなたのindex.htmlです

<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

そして、これはBootstrapで動作する例です：

<li class="col-sm-12 col-md-12 col-lg-4 animated slideInUp">
2
Ariel Massillo

これを作成しました package .cssファイルを使用可能な.tsファイルに変換するには、コマンドを実行するだけです

_npx css-angular animate.css animate.ts
_

そして、すべてのキーフレームとクラスをkeyframes([...])とstyle({...})を使用できる状態に変換します。

次に、animate.tsファイルからGeneratedStyles定数をインポートし、次のようにアプリのアニメーションに含めます

_import { trigger, transition, animate } from  '@angular/animations';
import { GeneratedStyles } from  './animate';

@Component({
  ...

  animations:[
    trigger("YOUR_ANIMATION_NAME", [
      transition(`:leave`, [
        animate("0.5s ease", GeneratedStyles.Animations.fadeOut)
      ]),

      transition(`:enter`, [
        animate("0.5s ease", GeneratedStyles.Animations.fadeIn)
      ])
    ])
  ]
})
_
2
Mosta