Animação em angularJS
Animation fornece uma solução para mover objetos em angularJS, ajudando a aumentar a experiência do usuário do aplicativo, tornando o aplicativo mais suave.
$ngAnimate
Etapas para começar a usar ngAnimate em angularJS: integre a biblioteca angulare-animate.js no projeto antes de usar e coloque o objeto e os parâmetros ngAnimate no array na inicialização do aplicativo ( injeção de dependência ). Veja o exemplo abaixo para entender como usar ngAnimate.
Nota: ngAnimate só funciona na versão estável 1.2.32 , não na versão mais recente
<!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> Bài viết liên quan:
Dịch vụ thiết kế Wesbite
