web-dev-qa-db-fra.com

Comment utiliser ng-animate dans angular 1.2?

Base

angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - TRAVAUX

Upped

angular 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - ECHEC

Je pense avoir suivi les instructions de la documentation - http://docs.angularjs.org/api/ngAnimate

• Commencez par inclure angular-animate.js dans votre code HTML 

• Puis chargez le module dans votre application en l'ajoutant en tant que module dépendant

Il est assez tard dans mon fuseau horaire et quelque chose d’évident me manque probablement. Mon hypothèse serait - fichier CSS entre 1.1.5 et 1.2.6 n'est pas compatible? Je ne peux pas vraiment dire ...

Quoi qu'il en soit, voici le code upped plunker, j'ai ajouté quelques commentaires pour souligner le fait que j'ai suivi les instructions de la documentation:

<!doctype html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>Top Animation</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="http://code.angularjs.org/1.2.6/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
  <!-- ^^^ load animate -->
</head>

<script>
var app = angular.module('app', ['ngAnimate']); // <-- dependent module

app.controller('Ctrl', function($scope) {
  $scope.names = ['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];
});

</script>

<body ng-controller="Ctrl">
  <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
    <form class="form-search"> 
        <div class="input-append">
          <input type="text" ng-model="search" class="search-query" style="width: 80px">
          <button type="submit" class="btn">Search</button>
        </div>
        <ul class="nav nav-pills nav-stacked">
          <li ng-animate="'animate'" ng-repeat="name in names | filter:search">
            <a href="#"> {{name}} </a>
          </li> 
      </ul>
    </form>
  </div>
</body>
</html>

Merci beaucoup pour l'aide!

javascriptangularjsng-animate
20
Michal Stefanow

Voici une version de travail de votre plunker ... http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview

Dans Angular 1.2+, vous n’avez plus besoin de déclarer la directive ng-animate. Des animations peuvent être ajoutées avec css seul. Donc, pour votre exemple, vous pouvez supprimer la directive ng-animate et donner à l'élément une classe css, alors changez ...

<li ng-animate="'animate'" ng-repeat="name in names | filter:search">

to...

<li class="animate" ng-repeat="name in names | filter:search">

puis mettez à jour votre css vers ...

.animate.ng-enter, 
.animate.ng-leave
{ 
...

.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
...

.animate.ng-enter.ng-enter-active, 
.animate.ng-leave {
...

Angular ajoutera simplement les classes ng-enter, ng-hide, ng-leave, etc. à l'élément et les supprimera de manière appropriée pendant le cycle de vie de l'animation, ce qui déclenchera les animations css. Il y a une liste de directives qui supportent quelles classes d'animation dans docs sous 'Utilisation'. Dans cet exemple, nous animons ng-repeat, de sorte que les classes ng-enter, ng-leave et ng-move seront ajoutées à notre élément au moment approprié et que nous pourrons y joindre des animations avec css.

36
Charlie Martin

J'ai trouvé cette démo qui fait un excellent travail: http://jsbin.com/usaruce/3/edit

Il utilise la syntaxe suivante:

.todo-item {
  -webkit-transition: color 0.6s, background-color 0.3s;
  -moz-transition: color 0.6s, background-color 0.3s;
  -ms-transition: color 0.6s, background-color 0.3s;
  transition: color 0.6s, background-color 0.3s;
}
.todo-item.ng-enter {
  -webkit-animation: fadeInLeft 1s;
  -moz-animation: fadeInLeft 1s;
  -ms-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s;
}
.todo-item.ng-leave {
  -webkit-animation: bounceOut 1s;
  -moz-animation: bounceOut 1s;
  -ms-animation: bounceOut 1s;
  animation: bounceOut 1s;
}

Il tire également parti de animate.css(fadeInLeft, bounceOut)

2
Michal Stefanow