🥇 anime aplicativos angulares com ngFx

Recentemente, descobri o ngFx como uma maneira simples de adicionar animações a aplicativos angulares. As animações são baseadas em animate.css, exceto que estão todas em javascript e empacotadas em um módulo angular. O Angular 1.4 está alterando as animações, então este post pode não ser relevante no futuro, mas aqui está uma solução de animação simples para os dias atuais.

Se você gostaria de ver o código – fonte, ele está no github.

Demo

iniciar

Eu configurei um modelo inicial angular leve com roteador ui e nenhum sistema de construção desajeitado. Clone-o e adicione o módulo ngFx , a biblioteca TweenMax e o módulo ngAnimate para cuidar das dependências. Você também pode usar caramanchão se for mais fácil para você. Adicione os módulos ao aplicativo.

var app = angular.module('ngfx-demo', [
    'ui.router',
    'ngFx',
    'ngAnimate'
]);

Então, para começar, vamos clicar em um botão e mostrar um formulário de login. Eu configurei um estado adicional com o mesmo controlador.

.state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: 'MainCtrl'
})

Em seguida, fiz um formulário de login básico com um botão show form.

templates / login.html

<div class='row text-center'>
    <div class='btn btn-success' ng-click='showForm = !showForm'>Show form</div>
</div>
<div id='loginBox' ng-show='showForm' class='col-sm-offset-4 col-sm-4 img-rounded fx-fade-down'>
    <form>
        <h2>Login</h2>
        <div class='form-group'>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
        </div>
        <div class='form-group'>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
</div>

Depois, há o controlador

app.controller('MainCtrl', function($scope){
    $scope.showForm = false;
});

E um pouco de css para embelezar (não animar).

body {
    height: 100%;
    background-color:lightblue;
}

#loginBox {
    background-color: white;
    margin-top:50px;
    box-shadow: 10px 10px 5px #888888;
    padding-bottom:20px;
}

Portanto, de todo aquele código e marcação, a única parte que adicionou animação foi a classe no pai do formulário html. O módulo usa o namespace fx, portanto, qualquer classe prefixada com é sobre animação e adiciona funcionalidade javascript. Do readme dizfx-fade-downfx

Todas as animações dinâmicas se ligam aos ganchos do ngAnimate. Então você pode aplicá-los a …

ng-ocultar / ng-mostrar
ng-include
ng-if
ng-view
ui-view (se você estiver usando ui.router)
ng-switch
classe ng
ng-repeat

Isso significa que todas essas diretivas têm “reconhecimento de animação” 1 . Portanto, quando a vinculação ng-show muda , ocorre uma animação de esmaecimento no elemento. Agora, nós acionamos a mudança clicando em um elemento. Até agora está muito legal.

Dica profissional: com bootstrap <div class="img-rounded">, você terá cantos arredondados em qualquer elemento.

Anime todas as coisas

Portanto, olhando para a lista acima, podemos adicionar animações para cada vez que uma página entrar. Em index.html

<div ui-view class='fx-bounce-right'></div>

Podemos adicionar animações mais complexas com easings, velocidades, diretivas e ganchos de evento. Esta é uma introdução básica sobre como usar este módulo para um projeto.

O código-fonte está AQUI . Se você gostaria de desenvolver isso, envie uma solicitação de pull!

iniciar

Anime todas as coisas

Related Posts