Prefácio
AngularJS fornece efeitos de animação que podem ser usados com CSS. AngularJS requer a introdução da biblioteca angular-animate.min.js ao usar a animação.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </sCript>
Você também precisa usar o modelo ngAnimate em seu aplicativo:
<corpo ng-app = "nganimate">
1. O que é animação?
A animação é um efeito de mudança dinâmica gerado pela alteração de elementos HTML.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <yoy> div {transição: todos os 0.5s lineares; Background-Color: LightBlue; Altura: 100px; largura: 100%; Posição: relativa; topo: 0; Esquerda: 0;} .ng-hide {altura: 0; largura: 0; Background-Color: transparente; topo: -200px; Esquerda: 200px;} </style> <script src = "js/angular.min.js"> </script> <script src = "js/angular-anmate.min.js"> </script> </head> <corpo ng-app "nganmate"> <h3> hide div: <input> typenget = "Body Ng-App =" nganmate "> <h3> ng-model = "mycheck"> </h3> <div ng-hide = "mycheck"> </div> </body> </html> Se nosso aplicativo definiu o nome do aplicativo, podemos adicionar ngAnimate diretamente ao modelo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <yoy> div {transição: todos os 0.5s lineares; Background-Color: LightBlue; Altura: 100px; largura: 100%; Posição: relativa; topo: 0; Esquerda: 0;} .ng-hide {altura: 0; largura: 0; Background-Color: transparente; topo: -200px; Esquerda: 200px;} </style> <script src = "js/angular.min.js"> </script> <script src = "js/angular-anmate.min.js"> </script> </head> <body ng-App "myApp> <h3> hide div: <input> ng-hide = "mycheck"> </div> <cript> var app = angular.module ('myApp', ['nganimate']);2. O que Nganimate fez?
O modelo ngAnimate pode adicionar ou remover a classe. O modelo ngAnimate não pode animar os elementos HTML, mas ngAnimate monitorará os eventos, semelhante ao esconder e exibir elementos HTML. Se ocorrer um evento, ngAnimate usará uma classe predefinida para animar os elementos HTML. As diretivas AngularJS para adicionar/remover classe: ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch .
(1) Classe ng especifica a classe CSS usada por elementos HTML
A diretiva ng-class é usada para ligar dinamicamente uma ou mais classes CSS aos elementos HTML. O valor da diretiva ng-class pode ser uma string, um objeto ou uma matriz. Se for uma string, vários nomes de classe são separados por espaços. Se for um objeto, você precisa usar um par de valores-chave , que é um valor booleano , e o valor é o nome da classe que você deseja adicionar. A classe só será adicionada se a chave for verdadeira . Se for uma matriz, pode ser composto de cordas ou combinações de objetos, e os elementos da matriz podem ser strings ou objetos.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-anmate.js"> </script> Background-Color: LightBlue; preenchimento: 20px; Font-Family: "Courier New";}. Tomato {Background-Color: Coral; preenchimento: 40px; Font-Family: Verdana;} </style> </head> <corpo ng-app = ""> <pan> Selecione uma classe: </span> <selecione ng-model = "home"> <opção value = "sky"> color </opcption> <opção "" Tomato "> Tomato </pption> </select> <dng n-class>" IT! </h4> </div> </body> </html>(2) NG-Class-Even é semelhante à classe NG, mas só funciona em linhas uniformes; NG-Class-ODD é semelhante à classe NG, mas só funciona em linhas estranhas; NG-Class-ODD é semelhante à classe NG, mas só funciona em linhas estranhas;
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </tititle> <script src = "js/angular.min.js"> </script> <estilo> .stripeven {cor: branco; Background-Color: Cian;}. StripeDodd {Color: White; Background-Color: YellowGreen;} </style> </ad Head> <corpo ng-App = "MyApp"> <tabela ng-controller = "myctrl"> <tr> <th> nome </th> <th> ng-class </th> </tr> <tr ng-reTeat = "nos registros" ng-class-even =) <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </itlage> <cript> var app = angular.module ("myApp", []); app.Controller ("myctrlle.module (scope" {scope "{[]; Futterkiste "," Country ":" Alemanha "}, {" Nome ":" Berglunds Snabbk "," Country ":" Sweden "}, {" Name ":" Centro Comercial Moctezuma "," Country ":" México "," Nome ":" Orn Handel "," Country ":" " ]}); </script> </body> </html>(3) ng-se se a condição for falsa remover elementos html
ng-if é usada para remover elementos HTML quando a expressão é falsa. Se o resultado da execução da instrução IF for verdadeira, o elemento removido será adicionado e exibido. ng-if é diferente da ng-hide , ng-hide oculta elementos, enquanto ng-if remove os elementos do DOM.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </tititle> <script src = "js/angular.min.js"> </sCript> </head> <corpo ng-app = "ng-init =" MyVar ng-model = "myvar"> </h3> <div ng-if = "myvar"> <h1> Bem-vindo </h1> <p> Bem-vindo à minha casa. </p> <p> Quando a caixa de seleção for selecionada, o elemento Div será re-exibido. </p> </body> </html>
(4) Ng verificou especifica se o elemento é selecionado
A diretiva ng-checked é usada para definir as propriedades verificadas de uma caixa de seleção ou botão de rádio. Se ng-checked retornar true, a caixa de seleção ou o botão de rádio será selecionado.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </tititle> <script src = "js/angular.min.js"> </script> </head> <body = "" "> <h3> My cars: </h3" All <br> <input type = "caixa de seleção" ng-checked = "all"> volvo <br> <typ type = "caixa de seleção" ng-checked = "all"> ford <br> <input type = "seleção" ng-checked = "all"> ford <br> <bring type = "caixa de seleção" ng-checked = "all"> ford <br> <bring = "" caixa de seleção "ng-checked =" All "> ford <br> <bring =" para selecionar todos os carros. </h3> </body> </html>
3. Use Animação CSS
Podemos usar a transição CSS ou a animação CSS para tornar os elementos HTML animados.
(1) transição CSS
A transição do CSS nos permite modificar suavemente um valor de atributo CSS para outro: quando .ng-hide é definida no elemento Div, a transição leva 0,5 segundos e a altura muda de 100 px para 0.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </ititle> <script src = "js/angular.min.js:"> </script> <script src = "js/angular-anmin.jster.js"> </script> <script src = "js/angular-anmin.niM.JS"> Background-Color: LightBlue; Altura: 100px;}. ng-hide {altura: 0;} </style> </ad head> <corpo ng-app = "myApp"> <h1> hide div: <input type = "caixa de seleção" ng-model = "mycheck"> </h1> <div ng-hide = "MyCheck"> </script "> ['nganimate']); </script> </body> </html>(2) Animação CSS
A animação CSS permite modificar suavemente os valores do atributo CSS: Quando .ng-hide for definida no elemento Div, a animação myChange será executada e mudará suavemente a altura de 100px para 0.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </ititle> <script src = "js/angular.minmin.js"> </script> <script src = "js/angular-anmin.min.js"> </script> <script src = "js/angular-anmate.min.js"> 100px; } para {altura: 10; }} div {altura: 100px; Background-Color: LightBlue;} Div.ng-Hide {Animação: 10s MyChange;} </style> </ad Head> <Body ng-App = "Nganimate"> ocultar div: <input Type = "Cosqueio" Ng-Model = "MyCheck"> <Div Ng-Hide = "MyCheck"> <//Bodel>Resumir
O exposto acima é tudo sobre animação angularjs. Este artigo o resume em detalhes e fornece código de exemplo. Espero que seja útil para todos que aprendem alguns angulares.