Angularjs Animation
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">
Что такое анимация?
Анимация - это эффект динамического изменения, генерируемый изменением элементов HTML.
Пример
Установите флажок, чтобы скрыть Div:
<! 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 = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> <h1> скрыть div: <input = "checkbox" ng-model = " 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 = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "myApp"> <h1> div: <input type = "ng-model =" mycheck " ng-hide = "mycheck"> </div> <script> var app = angular.module ('myApp', ['nganimate']); </script> </body> </html>Эффект бега:
Что сделал Nganimate?
Модель NGANIMATE может добавлять или удалять класс.
Модель NGANIMATE не может анимировать HTML -элементы, но NGANIMATE будет отслеживать события, аналогичные скрытию и отображению элементов HTML. Если происходит событие, Nganimate будет использовать предопределенный класс для анимирования HTML -элементов.
Директива AngularJS для добавления/удаления класса:
NG-SHOW
ng-hide
NG-Class
ng-view
ng-inplude
NG-Repeat
Нг-IF
NG-Switch
Директивы NG-SHOW и NG-HIDE используются для добавления или удаления значения класса NG-HIDE.
Другие директивы добавят класс NG-Enter при входе в DOM, а удаление DOM добавит свойство NG-Leave.
Когда изменяется положение элемента HTML, директива NG-Repeat также может добавить класс NG-Move.
Кроме того, после завершения анимации, классовая коллекция элементов HTML будет удалена. Например: директива NG-Hide добавит следующий класс:
ng-animate
ng-hide-animate
ng-hide-add (если элемент будет скрыт)
ng-hide-remove (если элемент будет отображаться)
ng-hide-add-активность (если элемент будет скрыт)
ng-hide-remove-active (если элемент будет отображаться)
Использование анимации CSS
Мы можем использовать CSS Transition или CSS -анимацию, чтобы сделать HTML -элементы оживить. Вы можете ссылаться на наш учебник по переходу CSS и учебник по анимации CSS.
CSS переход
Переход CSS позволяет нам плавно изменять одно значение атрибута CSS на другое:
Пример
Когда элемент div имеет набор класса.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <style> div {переход: все линейные 0,5 с; Фоно-цвета: LightBlue; Высота: 100px;}. ng-hide {height: 0;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "myApp"> <h1> div: <input type = "ng-model =" mycheck " ng-hide = "mycheck"> </div> <script> var app = angular.module ('myApp', ['nganimate']); </script> </body> </html>CSS анимация
Анимация CSS позволяет плавно изменять значения свойств CSS:
Пример
Когда класс .ng-hide будет установлен на элементе Div, будет выполнена анимация Mychange, которая плавно изменит высоту с 100px на 0:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <style> @keyframes mychange {от {height: 100px; } to {height: 0; }} div {height: 100px; Фоно-цвета: LightBlue;} div.ng-hide {анимация: 0.5s mychange;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> скрыть div: <input = "fackbox" ng-model = "mycheck"> <Div ng-hide = "mycheck"> </div> </body> </html>Выше приведено коллекция информации об анимации AngularJS. Пожалуйста, обратитесь к нему, если вам это нужно.