Bonjour tout le monde,

Avant de poster ici j'ai cherché sur le net mais je n'ai pas trouvé de solution, j'espère aussi ne pas poster dans la mauvaise catégorie.

J'ai suivi la formation Angular puis le tuto sur les animations avec le module Animate.

Cependant, j'ai un comportement différent que ce qu'on peut voir sur le tuto. Lorsque mes blocs dans un ng-repeat apparaissent (opacity:1) avec ng-enter, ils disparaissent aussi tôt (opacity:0 puisqu'ils sont toujours dans le DOM).

Voici un screen pour vous représenter la chose :

Lors du premier chargement mes 3 colonnes apparaissent mais elles disparaissent après quelques secondes (la zone devient blanche).

Voici mon code :

Le HTML :

<div class="row">
            <article ng-repeat="p in posts | filter: search.titre" class="col-lg-4 animated fade">
                <h2>{{p.titre}}</h2>
                <p>{{p.content}}</p>
                <a href="" ng-click="showEditPost(p)">Editer</a> -
                <a href="" ng-click="supprimerPost(p)">Supprimer</a>
                <hr>
            </article>
        </div>

Le CSS (j'ai juste ce fichier, sinon c'est du bootstrap) :

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
.animated.ng-enter,
.animated.ng-leave {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.fade.ng-enter {
    animation-name: fadeInDown;
}
.fade.ng-leave {
    animation-name: fadeOutUp;
}

Et le JS :

var app = angular.module('MonApp', 'ngResource', 'ngAnimate']);

Pourriez-vous m'éclairer sur la question svp ? Pour charger les articles j'ai une API Rest qui me les retourne en JSON.

Merci d'avance.

1 réponse


sorow57
Auteur
Réponse acceptée

En faite il s'agissait d'un problème lié à une classe CSS existante dans le bootstrap, à savoir "fade". Le topic peut être fermé. :)