Angular 3 でアニメーションを作成するにはどうすればよいですか? angularjsを使用したアニメーション作成の詳細は次のとおりです。

この記事は、学習結果を定着させるための演習記事です。では、angularjs でアニメーション 3 を試して、その効果を確認してみましょう。一緒に見ていきましょう

これが前置きです

この記事はangularをベースにした実践的な練習プロジェクトです。記事の目次
前回の記事「角度の練習 - アニメーション 2」では、入口と出口のアニメーション、シリアル アニメーションを実装するキーフレーム、並列アニメーションを実装するグループを練習しました。今日はアニメーションのコールバック関数とクエリセレクターを練習します。

練習を始めましょう

コールバック関数

(さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS 開発マニュアル にアクセスして学習してください)

コールバック メソッドも、次のように非常に簡単です:

  <p>
  </p>


  Callback(f:boolean){
    if(f){
      console.log("动画开始");
    }else {
      console.log("动画结束");
    }
  }

query

使い方はcssセレクターとほぼ同じで、クエリを通じて異なる要素で異なるアニメーション効果を実現できます。

/*
query选择器演示
用法和css选择器大致相同
 */
export const QueryAnimate = trigger('QueryAnimate',[
    transition('off=>on', [
      // 先全部隐藏
      query('p', style({ opacity: 0 })),
      // 再执行动画
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateX(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(0.5)'}),
        style({transform: 'scale(1)'})
      ]) )),
    ]),
    transition('on=>off', [
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(-400%)'})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateX(0)'}),
        style({opacity: 0, transform: 'translateX(-400%)'})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(400%)'})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(1)'}),
        style({transform: 'scale(0.5)'})
      ]) )),
    ])
  ]);

ソースコード

ソースコードはgithubオープンソースコミュニティに配置されており、随時更新されます。したがって、最新バージョンをダウンロードすると、記事に記載されている内容と多少異なります。 Github アドレス: https://github.com/yiershan/A...

さて、この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS ユーザー マニュアル にアクセスして学習してください)。ご質問がございましたら、以下にメッセージを残してください。

以上がAngular 3 でアニメーションを作成するにはどうすればよいですか? angularjsを使用したアニメーション作成の詳細は次のとおりです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。