web-dev-qa-db-fra.com

Animate.css et Angular 4

J'ai fouillé un peu et il semble qu'il n'y ait vraiment aucun moyen simple de faire fonctionner les animations Animate.css dans Angular. Cela signifie que les animations devraient essentiellement être supprimées de la bibliothèque Animate.css et traduites en animations Angular.

Y a-t-il quelque chose qui me manque ou des ressources que j'ai manquées sur ce sujet? Sinon, y a-t-il d'autres bibliothèques d'animation qui fonctionneront hors de la boîte avec Angular 4?

cssangularanimationanimate.css
9
QuietSeditionist
  1. Installez animate.css via npm npm install animate.css --save
  2. Dans votre .angular-cli.json, ajoutez "../node_modules/animate.css/animate.css", - ou si vous utilisez Angular 6+, dans votre ou angular.json, ajoutez "/node_modules/animate.css/animate.css", - Dans votre "styles" tableau au-dessus de styles.css (voir l'exemple ci-dessous).
  3. Redémarrez votre serveur local et actualisez votre navigateur. ng serve

Exemple:

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

À la suite du Hacktoberfest cette année, j'ai supprimé toutes les animations de Animate.css et créé une bibliothèque Angular qui fait tout ce que fait animate.css avec la possibilité d'utiliser des paramètres dynamiques. Elle prend en charge les compilations AOT et JIT.

Vous pouvez consulter ma démo ici: https://filipows.github.io/angular-animations/ et faites-moi savoir ce que vous en pensez.

Voici un Stackblitz pour jouer avec: https://stackblitz.com/edit/angular-animations-lib-demo

Fondamentalement, vous pouvez les déclencher avec une valeur booléenne:

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

Ou lorsque l'élément entre ou sort du DOM:

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

Et il peut être paramétré à partir du modèle:

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

La seule chose que vous devez faire est d'importer l'animation dans votre fichier de composant et de l'ajouter aux animations dans un décorateur de composant:

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

Vous pouvez également y utiliser des paramètres, mais ceux-ci ne peuvent pas être modifiés dynamiquement comme celui à l'intérieur d'un modèle:

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

Installez animate.css via npm -

npm install animate.css --save

Ensuite, ajoutez angular-cli.json par

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

Et enfin,

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

J'essayais de faire fonctionner cette bibliothèque css dans Angular 4 et j'ai trouvé une solution. Ne l'installez pas via npm, ajoutez simplement le lien cdn d'Animate.css au fichier index.html et puis ajoutez les classes correspondantes à vos éléments. Fonctionne pour moi.

Modifier: Ceci est votre index.html

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

Et ceci est un exemple de fonctionnement avec Bootstrap:

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

J'ai créé ce package pour convertir le fichier .css en fichier .ts utilisable, il suffit d'exécuter la commande

npx css-angular animate.css animate.ts

et il convertira toutes les images clés et les classes en keyframes([...]) et style({...}) prêtes à l'emploi.

puis importez la constante GeneratedStyles du fichier animate.ts et incluez-la dans vos animations d'application, comme ceci

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