Comment créer des animations avec Angular 3 ? Voici les détails de la création d'animations avec angulairejs

Cet article est un article d'exercice pour consolider vos résultats d'apprentissage. Essayons maintenant l'animation trois dans angularjs pour voir l'effet. Jetons-y un coup d'oeil ensemble

Ceci est la préface

L'article est un projet pratique basé sur angulaire. Table des matières de l'article
Dans l'article précédent "Angular Practice Animations 2", nous avons pratiqué les animations d'entrée et de sortie, les images clés pour implémenter l'animation en série et le groupe pour implémenter l'animation parallèle. Aujourd'hui, nous pratiquons les fonctions de rappel d'animation et les sélecteurs de requêtes.

Commencez à pratiquer

Fonction de rappel

(Si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel de développement AngularJS pour apprendre)

La méthode de rappel est également très simple, de la manière suivante :

  <p>
  </p>


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

requête

utilisation et sélecteur CSS À peu près les mêmes, différents éléments peuvent obtenir différents effets d'animation via une requête.

/*
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)'})
      ]) )),
    ])
  ]);

Code source

Le code source est placé sur la communauté open source github et sera mis à jour à tout moment . Par conséquent, lorsque vous téléchargerez la dernière version, elle sera légèrement différente de ce qui est décrit dans l'article. Adresse Github : https://github.com/yiershan/A...

D'accord, cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site PHP chinoisManuel d'utilisation AngularJS Apprentissage), si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!