2
respostas

Animação não funciona

Olá a todos, nesta parte do curso consegui fazer quase tudo, o filtro funciona, os painéis estão espaçados e etc. Mas a animação de 'fade' não está funcionando. Alguém pode ajudar? Segue códigos:

Index.html

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/efeitos.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
        <script src="js/lib/angular-animate.min.js"></script>
    </head>
    <body ng-controller="FotosController">
        <div class="container">
            <div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <form>
                        <input class="form-control" ng-model="filtro" ng-model-options="{debounce:500 }" placeholder="filtrar">
                    </form>
                </div><!-- fim col-md-12 -->
            </div><!-- fim row -->
            <div class="row">                
                    <meu-painel class="painel-animado" ng-repeat = "foto in fotos | filter:filtro" titulo = "{{foto.titulo}}">
                        <img class="img-responsive center-block" src="{{foto.url}}">
                    </meu-painel>
                </div>                   

            </div><!-- fim row -->
        </div><!-- fim container -->
    </body>
</html>

efeitos.css

.painel-animado.ng-leave-active {
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -o-transform: scale(0.1);
  transform: scale(0.1);
} 

.painel-animado {
    -moz-transition:transform 0.8s;
    -webkit-transition:transform 0.8s;
    -ms-transition:transform 0.8s;
    -o-transition:transform 0.8s;
    transition:transform 0.8s;
}

main.js

angular.module('alurapic', ['minhasDiretivas','ngAnimate']);

Grato.

2 respostas

Fala ai Felipe, tudo bem? Faz muito tempo que não mexo com Angular JS, sendo assim, preciso te pedir um favor.

Compartilhar o projeto completo, assim eu consigo simular o problema por aqui e analisá-lo/relembrá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Obs: Caso tenha dependencias como servidor ou API, coloca no zip também por favor.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software