Animation in AngularJS
Animation bietet eine Lösung zum Bewegen von Objekten in AngularJS, die dazu beiträgt, die Benutzererfahrung der Anwendung zu verbessern und die Anwendung flüssiger zu machen.
$ngAnimieren
Schritte zum Verwenden von ngAnimate in angleJS: Integrieren Sie die anglee-animate.js-Bibliothek vor der Verwendung in das Projekt und legen Sie das ngAnimate-Objekt und die Parameter bei der Anwendungsinitialisierung in das Array ( Abhängigkeitsinjektion ). Sehen Sie sich das folgende Beispiel an, um zu verstehen, wie ngAnimate verwendet wird.
Hinweis: ngAnimate funktioniert nur mit der stabilen Version 1.2.32 , nicht mit der neuesten Version
<!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
