Implementar efeitos de animação JavaScript em aplicativos AngularJS
O AngularJS é um rico conjunto de estruturas para criar aplicativos da Web de página única, trazendo todas as funções necessárias para criar aplicativos ricos e interativos. Uma das principais características é que o Angular traz suporte para animação.
Podemos usar animações em parte do conteúdo do aplicativo para mostrar que algumas mudanças estão acontecendo. No meu último artigo, falei sobre o apoio às animações do CSS em aplicações angulares. Neste artigo, veremos como usar scripts JavaScript para gerar efeitos de animação em aplicativos AngularJS.
No angular, a única diferença entre CSS e JavaScript é a definição deles. Não há diferença que impeça que a animação definida seja usada. Primeiro, precisamos carregar o módulo Nganimate no módulo raiz de nosso aplicativo.
Angular.Module ('CourseSapApp', ['Nganimate']);
Todos os eventos de animação JavaScript a serem processados permanecem inalterados. Aqui está uma lista de animações diretamente suportadas e seus comportamentos diferentes correspondentes:
Conjunto de eventos de instrução
ng-view
ng-inclusão
ng-switch
ng-se enter
Deixar
ng-repeat enter
Deixar
mover
ng-show
ng-hide
ng-classe add
Remover
A lista acima é a mesma do artigo anterior, mas não menciona as classes CSS correspondentes, porque não precisamos usá -las para definir animações JavaScript. Todos esses eventos ocorrerão apenas depois que o módulo de aplicação carregou o módulo Nganimate. Agora vamos ver como fazer essas instruções se mover.
Sintaxe para animações angulares personalizadas
Aqui está uma estrutura básica para animações de JavaScript personalizadas:
angular.module ('CourseSapp'). Animação ('. Nome da animação', função (<injetáveis>) {return {Event: function (elem, done) {// lógica da animação done ();}};});Aqui estão alguns pontos -chave a serem lembrados ao escrever animações JavaScript no AngularJS:
1. O nome da animação começa com um ponto (.)
2. Todos os comportamentos de animação aceitam dois parâmetros:
• Um objeto no elemento DOM que está prestes a executar a animação é um objeto JQLite que foi carregado antes que o AngularJS seja carregado ou um objeto jQuery.
• Uma função de retorno de chamada no final de uma animação. A ação correspondente à instrução é pausada até que a função de retorno de chamada seja chamada.
Temos várias bibliotecas JavaScript, como jQuery, Greensock, Anima e várias outras bibliotecas que facilitam a redação de animações. Para simplificar, estou usando o jQuery para criar animações nesta postagem. Para aprender várias outras bibliotecas, você pode visitar os sites correspondentes.
Deixe o NG-View mover
A animação usada em uma diretiva NG-View é executada ao alternar as vistas dos aplicativos AngularJS.
Aqui está o efeito visual causado por uma animação quando uma visão está aparecendo:
CourSeAppanimations.animation ('. View-slide-in', function () {return {enter: function (elemento, feito) {element.css ({opacity: 0.5, posição: "relativa", top: "10px", esquerda: "20px"}).O acima cria um efeito deslizante quando uma exibição entra na tela. O método feito é passado como uma função de retorno de chamada. Isso é para mostrar que a animação acabou e agora a estrutura do AngularJS pode continuar com a próxima ação.
Observe o método em que o método Animate () é chamado. Não precisamos converter esse elemento em um objeto jQuery, porque o jQuery já está carregado antes de carregar o AngularJS.
Agora precisamos aplicar esse efeito de animação à diretiva NG-View. Embora essa animação seja definida no JavaScript, usamos uma tag de classe para aplicá -la à diretiva de destino conforme acordado.
Animação Ng-Repeat
Entre as instruções que você pode optar por usar, o NG-REPEAT é um comando muito importante. Existem duas outras instruções operacionais básicas: filtragem e classificação. Adicione, mova ou remova as instruções correspondentes de acordo com as ações executadas.
A seguir, demonstra o uso de algumas animações básicas e, quando ocorrem alterações, você pode ver os efeitos de animação correspondentes.
CourSeAppanimations.animation ('. Repetir -animação', function () {return {enter: function (elemento, feito) {console.log ("Entering ..."); var width = element.Width (); função (elemento, feito) {Element.css ({position: 'relativa', esquerda: 0, opacidade: 1}); feito); } };});Animação Ng-Hide
A diretiva NG-HIDE é usada para adicionar ou remover a classe de estilo NG-HIDE do elemento de destino. Para usar uma animação, geralmente precisamos adicionar ou remover estilos CSS. Passe o nome da classe para a classe de processamento de animação para alcançar esse efeito. Isso nos permite verificar esta classe e fazer modificações apropriadas no código.
A seguir, é apresentado um código de amostra de animação, usando a diretiva NG-HIDE para alcançar o efeito de exibição gradual e desbotado dos elementos:
CourSeAppanimations.animation ('. Hide-animação', function () {return {beFeAddClass: function (elemento, className, done) {if (className === 'ng-hide') {element.anmate ({opacity: 0}, 500, done);} (dod); (ClassName === 'Ng-Hide') {Element.css ('opacidade', 0);Deixe os comandos personalizados moverem
Para tornar as diretrizes personalizadas animar, precisamos usar o serviço de $ Animate. Embora o serviço de $ Animate faça parte da estrutura do AngularJS Core, o Nganimate deve ser carregado antes que esse serviço possa desempenhar seu maior papel.
Usando o mesmo exemplo do artigo anterior, apresentaremos uma lista de cursos de uma página. Criamos um comando para exibir os detalhes do curso na grade e o conteúdo da grade será alterado ao clicar no link "View Statistics". Vamos adicionar uma animação para apresentar esse efeito de conversão ao usuário.
Quando a animação de transformação começar, adicionaremos uma tag CSS e, no final, removeremos esta tag de classe. Aqui está o código de amostra para esta diretiva:
App.Directive ('CourseDetails', function ($ animate) {return {Scope: true, templateurl: 'CourseDetails.html', link: function (scope, elem, attrs) {scope.ViewDetails = true; elem.find ('Button'). {elem.RemoveClass ("Switching");Como você pode ver, realizamos essa ação no final da animação. Nas ferramentas de desenvolvedor do navegador, quando analisamos os elementos da diretiva, descobriremos que as duas tags de classe, ativadas com switching e comutação, estão sendo adicionadas rapidamente e removidas. Podemos ver os efeitos da animação definindo um estilo de conversão CSS ou uma animação JavaScript personalizada. Aqui está um estilo de conversão CSS simples que pode ser usado para as instruções acima mencionadas. Para simplificar, removemos prefixos específicos:
.det-anim.switching {transição: todos os 1s lineares; Posição: relativa; Opacidade: 0,5; Esquerda: -20px;}Ou aqui está uma animação escrita por jQuery que pode ser usada para a mesma instrução:
CourSeAppanimations.animation ('. }}}});Nessas animações, se puder ser aplicado a instruções internas, também poderá ser aplicado a instruções personalizadas:
<Div Curso-Details>/Div>
Você pode ver os efeitos de todas as animações acima em execução na página de exemplo.
para concluir
A animação, quando adequada e adequadamente usada, trará raiva ao aplicativo. Como vimos, o AngularJS fornece vários suporte para animações CSS e JavaScript. Você pode escolher um deles com base na situação da equipe.
No entanto, o uso de muita animação retardará o aplicativo, o que fará com que o aplicativo pareça não humilizado para os usuários. Portanto, você deve ter cuidado e otimizado para usar esta arma.