Animazione in angularJS
L'animazione fornisce una soluzione per lo spostamento di oggetti in angularJS, contribuendo ad aumentare l'esperienza utente dell'applicazione, rendendo l'applicazione più fluida.
$ngAnimate
Passaggi per iniziare a utilizzare ngAnimate in angularJS: integrare la libreria angular-animate.js nel progetto prima dell'uso e inserire l'oggetto e i parametri ngAnimate nell'array dopo l'inizializzazione dell'applicazione ( iniezione di dipendenza ). Vedi l'esempio sotto per capire come usare ngAnimate.
Nota: ngAnimate funziona solo sulla versione stabile 1.2.32, non sull'ultima versione
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example animation</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script> <script src="https://code.angularjs.org/1.2.32/angular-animate.min.js"></script> <style> div { transition: all linear 0.5s; background-color: cyan; height: 100px; width: 100%; position: relative; top: 0px; left: 0px; } .ng-hide { height: 0px; width: 0px; background-color: transparent; top: -200px; left: 200px; } </style> </head> <body ng-app="myApp" ng-controller="myController"> <h2>hide the DIV: <input type="checkbox" ng-model="myModel" /></h2> <div ng-hide="myModel"></div> </body> <script> var app = angular.module('myApp', ['ngAnimate']); app.controller('myController', function ($scope) { $scope.myModel = false; }); </script> </html> 
