javascript - event - ng-animate ng-show
¿Cómo usar ng-animate en angular 1.2? (2)
Aquí hay una versión de trabajo de su plunker ... http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview
En Angular 1.2+, ya no es necesario declarar la directiva ng-animate. Las animaciones se pueden agregar con css solo. Entonces, para su ejemplo, puede eliminar la directiva ng-animate y darle al elemento una clase css, así que cambie ...
<li ng-animate="''animate''" ng-repeat="name in names | filter:search">
to...
<li class="animate" ng-repeat="name in names | filter:search">
y luego actualice su css a ...
.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 simplemente agregará las clases ng-enter, ng-hide, ng-leave ... etc. al elemento y las eliminará de manera adecuada durante el ciclo de vida de la animación, lo que activará las animaciones css. Hay una lista de las directivas que admiten las clases de animación en los http://docs.angularjs.org/api/ngAnimate en "Uso". En este ejemplo, estamos animando ng-repeat, por lo que las clases ng-enter, ng-leave y ng-move se agregarán a nuestro elemento en el momento adecuado y podemos adjuntarles animaciones con css.
Base
angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS
Subido
angular 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - FAIL
Creo que sí seguí las instrucciones de los documentos: http://docs.angularjs.org/api/ngAnimate
• Primero incluye angular-animate.js en tu HTML
• Luego, cargue el módulo en su aplicación agregándolo como un módulo dependiente
Es bastante tarde en mi zona horaria y probablemente me esté perdiendo algo obvio. Mi conjetura sería: ¿el archivo CSS entre 1.1.5 y 1.2.6 no es compatible? Realmente no puedo decir ...
De todos modos, aquí está el código de forma abultada, incluí algunos comentarios para enfatizar que seguí las instrucciones de los documentos:
<!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>
Muchas gracias por ayudar!
He encontrado esta demostración que hace un gran trabajo: http://jsbin.com/usaruce/3/edit
Utiliza la siguiente sintaxis:
.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;
}
También se aprovecha de animate.css (fadeInLeft, bounceOut)