Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Aula 5 - Melhorando a experiência do usuário (Problema com animação)

Olá pessoal!

Seguinte, vi que a galera já abriu diversos tópicos a respeito desse problema, mas ainda não consegui resolver o meu.

Basicamente, a animação não funciona, fiz os imports, adicionei a dependência no módulo principal e o css está de acordo. Vou continuar a procurar onde errei mas se puderem me ajudar eu agradeço!

Segue abaixo o código da index:

<!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/lib/angular-animate.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>
    </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="Pesquisar.." />
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <meu-painel class="painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}">
                        <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}" />
                    </meu-painel>
                </div>
            </div>
        </div>
    </body>
</html>

CSS:

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

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

Olá Lucas!

Pelo que vi em seu index.html e em efeitos.css, tudo está dentro dos conformes.

E como está lá em seu main.js?

Você fez a chamada do ngAnimate? Ex: angular.module('alurapic', ['minhasDiretivas', 'ngAnimate']);

Boa tarde Raphael!

Segue o código do main.js:

angular.module('alurapic', ['minhasDiretivas', 'ngAnimate']);
solução!

Lucas, pelo que percebi o problema acontece pois você não incluiu a class "col-md-2" em seu painel: Ex:

<meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}">

Grande Raphael! Era isso mesmo cara, tinha colocado essa class em uma div do arquivo meu-painel.html e estava "funcionando", removi a class da div e adicionei onde disse, funcionou certinho!

Obrigado!