angleJSのアニメーション
アニメーションは、angularJSでオブジェクトを移動するためのソリューションを提供し、アプリケーションのユーザーエクスペリエンスを向上させ、アプリケーションをよりスムーズにします。
$ ngAnimate
angleJSでngAnimateの使用を開始する手順：使用する前にangulare-animate.jsライブラリをプロジェクトに統合し、アプリケーションの初期化時にngAnimateオブジェクトとパラメーターを配列に配置します（依存性注入）。 ngAnimateの使用方法を理解するには、以下の例を参照してください。
注：ngAnimateは安定バージョン1.2.32でのみ機能し、最新バージョンでは機能しません
<!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
