Предисловие
AngularJS обеспечивает эффекты анимации, которые можно использовать с CSS. Angularjs требует введения библиотеки angular-animate.min.js при использовании анимации.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script>
Вы также должны использовать модель ngAnimate в вашем приложении:
<body ng-app = "nganimate">
1. Что такое анимация?
Анимация - это эффект динамического изменения, генерируемый изменением элементов HTML.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <style> div {переход: все линейные 0,5 с; Фоно-цвета: LightBlue; высота: 100px; Ширина: 100%; позиция: относительно; Верх: 0; слева: 0;} .ng-hide {height: 0; Ширина: 0; фоновый цвет: прозрачный; Верх: -200px; Слева: 200px;} </style> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> <h3> hide div: <input = "chearbobe" ng-mod = "/h3 <h3> hide div: <div wint =" ng-ceck = "/h3 <h3> hide div: <div wint =" ng-app = "nganimate" <h3> <h3> hide div: <dip = ". ng-hide = "mycheck"> </div> </body> </html> Если наше приложение установило имя приложения, мы можем добавить ngAnimate напрямую в модель:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <style> div {переход: все линейные 0,5 с; Фоно-цвета: LightBlue; высота: 100px; Ширина: 100%; позиция: относительно; Верх: 0; слева: 0;} .ng-hide {height: 0; Ширина: 0; фоновый цвет: прозрачный; Верх: -200px; Слева: 200px;} </style> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> <body ng-app = "myApp"> <h3> hide div: <input = "ng-model ="/hceck "/hceck"/hceck "/h3 ng-hide = "mycheck"> </div> <script> var app = angular.module ('myApp', ['nganimate']); </script> </body> </html>2. Что сделал Nganimate?
Модель ngAnimate может добавлять или удалять класс. Модель ngAnimate не может анимировать HTML -элементы, но ngAnimate будет отслеживать события, аналогичные скрытию и отображению элементов HTML. Если происходит событие, ngAnimate будет использовать предопределенный класс для анимирования HTML -элементов. Директивы AngularJS для добавления/удаления класса: ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch .
(1) NG-класс Определяет класс CSS, используемый HTML-элементами
Директива ng-class используется для динамического связывания одного или нескольких классов CSS с элементами HTML. Значение директивы ng-class может быть строкой, объектом или массивом. Если это строка, несколько имен классов разделены пространствами. Если это объект, вам необходимо использовать пару клавишных значений , которая является логическим значением , и значение-это имя класса, которое вы хотите добавить. Класс будет добавлен только в том случае, если ключ верен . Если это массив, он может состоять из строк или комбинаций объектов, а элементы массива могут быть строками или объектами.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.js"> </script> <stleor>. Фоно-цвета: LightBlue; Заполнение: 20px; font-family: "courier new";}. Томат {фоновый цвет: coral; Заполнение: 40px; font-family: verdana;} </style> </head> <body ng-app = ""> <pan> выберите класс: </span> <select ng-model = "home"> <vitue value = "небо" Color </option> <antain value = "tomato"> tomato color </option> </selet> <div ng-class = "home"> <h3> house home home home> </h3 </h3 </h3 </H home! Это! </h4> </div> </body> </html>(2) NG-Class-E (даже аналогичен NG-классу, но работает только на ровных линиях; NG-Class-ODD похож на NG-класс, но работает только на нечетных линиях; NG-Class-ODD похож на NG-класс, но работает только на нечетных линиях;
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <style> .stripedeven {color: white; фоновый цвет: cyan;}. Stripedodd {color: White; фоновый цвет: hellowgreen;} </style> </head> <body ng-app = "myApp"> <таблица ng-controller = "myCtrl"> <Tr> <Th> name </th> <Th> Country </th> </tr> <tr ng-repeat = "x в записях" ng-class-eeven = " <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> <script> var app = angular.module ("myApp", []); app.controller ("myCtrl", function ($ scope) {$ scope. Fatterkiste "," Country ":" Germany "}, {" name ":" Berglunds Snabbk "," Country ":" Sweden "}, {" name ":" Centro comercial moctezuma "," страна ":" Мексика "}, {" имя ":" ernst handel "," страна ":" Австро "}, {" "kame": "Ernst handel", «страна»: «Австро»}, {«имя»: ]}); </script> </body> </html>(3) ng-if, если условие неверно удалить элементы HTML
Директива ng-if используется для удаления HTML-элементов, когда выражение является ложным. Если результат выполнения оператора IF является истинным, удаленные элементы будут добавлены и отображаются. Директива ng-if отличается от ng-hide , ng-hide скрывает элементы, в то время как ng-if удаляет элементы из DOM.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> </head> <body ng-app = "ng-init =" myvar = true "> <h. h3> hare ht hat hat hat hat hat hat hat hat hat hat hat hat hat hat hat hat hat hat hat hat hat hat app =" "myvar = true" ng-model = "myvar"> </h3> <div ng-if = "myvar"> <h1> добро пожаловать </h1> <p> Добро пожаловать в мой дом. </p> <p> Когда флажок будет переоборудован, элемент Div будет повторно разбирается. </p> </body> </html>
(4) NG-проверка указывает, выбран ли элемент
Директива ng-checked используется для установления проверенных свойств флажести или радионогиции. Если свойство ng-checked возвращает True, будет выбран флажок или радиобатч.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> </head> <body ng-app = ""> <h3> мои автомобили: </h3> <input ypect = "ng-recbode" all<br> <input type="checkbox" ng-checked="all">Volvo<br> <input type="checkbox" ng-checked="all">Ford<br> <input type="checkbox" ng-checked="all">Ford<br> <input type="checkbox" ng-checked="all"> ng-checked="all">Mercedes <h3>Click "Check all" to select all машины </h3> </body> </html>
3. Используйте анимацию CSS
Мы можем использовать CSS Transition или CSS -анимацию, чтобы сделать HTML -элементы оживить.
(1) CSS переход
CSS Transition позволяет нам плавно изменять одно значение атрибута CSS на другое: когда класс .ng-hide установлен на элементе DIV, переход занимает 0,5 секунды, а высота изменяется от 100 % до 0.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> <style> divition> divitiation> <style> divitiation> <style> <style> <style> <style> <style> divitiation> <style> Фоно-цвета: LightBlue; Высота: 100px;}. ng-hide {height: 0;} </style> </head> <body ng-app = "myApp"> <h1> скрыть div: <input type = "fackbox" ng-model = "mycheck"> </h1> <div ng-hide = "mycheck"> </div> <cript> var app = angular. ['nganimate']); </script> </body> </html>(2) CSS -анимация
Анимация CSS позволяет плавно изменять значения атрибутов CSS: когда класс .ng-hide установлен на элементе DIV, будет выполнена анимация myChange , и он плавно изменит высоту от 100 пикселей на 0.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> <style>@@@@@@@@@@@@@@@@@@@@@@@@@@@ch- 100px; } to {height: 10; }} div {height: 100px; фоновый цвет: lightblue;} div.ng-hide {анимация: 10s mychange;} </style> </head> <body ng-app = "nganimate"> скрыть div: <input type = "ng-model =" mycheck "> <div ng-hide =" mycheck "> </div> </body> </html>Суммировать
Вышеуказанное все о анимации Angularjs. В этой статье подробно это суммирует его и предоставляет пример кода. Я надеюсь, что это будет полезно для всех, кто изучает некоторые Angularjs.