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

Aula 5 - Efeito css nao funciona.

Já importei os arquivos mais quando faz o filtro não o realiza o efeito. Segue o código abaixo.

efeito.css

.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;
}

.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);
}

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>
    </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 ng-model="filtro" ng-model-options="{debounce: 500}" class="form-control" placeholder="Filtrar">
                    </form>
                </div><!-- fim col -->
            </div><!-- fim row -->
            <div class="row">
                <meu-painel class="col-md-2 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><!-- fim panel -->
            </div>

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

No aguardo.

2 respostas
solução!

Olá Charles, O problema talvez seja seu navegador se for o Chrome o efeito não acontece porque o meu-painel vem com

display: inline;

para funcionar basta mudar para:

display: block;

Espero ter ajudado.

Bons estudos!

Tudo funcionando agora, Obrigado carlos!

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