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

animação não funciona (importei o ngAnimate e script no HTML)

angular.module('alurapic', ['minhasDiretivas', 'ngAnimate']);
</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}" type="text" class="form-control" placeholder="filtrar">
                </form>
            </div>
        </div>

        <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>
        </div>

        <!--panel bootstrap

         <div ng-repeat = "foto in fotos" class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{foto.titulo}}</h3>
            </div>
            <div class="panel-body">
                <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
            </div>
        </div>  <--fim panel-->

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

</body>
``` .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; }

meu-painel.html:1 Uncaught SyntaxError: Unexpected token '<'

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center">{{titulo}}</h3>
    </div>
        <div class="panel-body" ng-transclude> <!--diretiva p manter elemento filhos-->
    </div>
</div>

efeitos.css:1 Uncaught SyntaxError: Unexpected token '.'

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

`

3 respostas

Fala ai Jessica, tudo bem? Consegue compartilhar o projeto completo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

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

Outro ponto, vi que você está fazendo o curso de AngularJS, gostaria de entender um pouco mais a motivação, você precisa dar manutenção em projetos que utilizam o mesmo ou algo do tipo?

Pergunto isso porque o mesmo foi descontinuado pela Google e substituído pelo Angular 2+.

Espero ter ajudado.

solução!

Boa noite Matheus! Tudo bem por aqui. deixei a pasta do projeto disponivel por meio do link: https://drive.google.com/file/d/1OgZnTEs4YaUUEYIEKP-abSXoZ0sOSeUJ/view?usp=sharing

Em relação ao curso, estou trabalhando com um projeto em angularJS no momento. Mas após esse curso pretendo expandir meu conhecimento com o angular atual. Vou esperar ansiosa a sua ajuda, ótima semana.

Fala ai Jessica, dei uma olhada no seu projeto, o problema está na importação do arquivo efeitos.css, você está importando ele como se fosse um arquivo JavaScript, seu código:

<script src="css/efeitos.css"></script>

Mas, na verdade deveria importar como estilos:

<link rel="stylesheet" href="css/efeitos.css">

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