Dúvida no Ex. 6 da Aula 04 | AngularJS: crie webapps poderosas

Solucionado (ver solução)

Solucionado
(ver solução)

6
respostas

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Melhorando a experiência do usuário e atividade Colocando em prática

por Erick

| 242.7k xp | 23 posts

Desenvolvedor

Olha o css, está identico e mesmo assim nao aplica o efeito, estou usando win10, jah testei em todos os navegadores meno no safari


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

6 respostas

por Flavio Henrique de Souza Almeida

| 3119.3k xp | 6969 posts

Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

30/11/2016

Erick, compartilhe o código de index.html e main.js também. Blz? Quando abriu o novo post você não contextualizou o problema. Eu sei porque vi no outro post.

por Erick

| 242.7k xp | 23 posts

Desenvolvedor

30/11/2016

Segue o Index.html

<!DOCTYPE html>
<!-- Carregando o modulo Principal com a DIRETIVA ng-app='nome_do_modulo'-->
<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 type="text/javascript" src="js/lib/angular.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/controllers/fotos-controller.js"></script>
        <script type="text/javascript" src="js/directives/minhas-diretivas.js"></script>
        <script type="text/javascript" src="js/directives/barra-principal/fnm-principal.js"></script>
 </head>

<!-- Utlizando Controller com a DIRETIVA ng-controller -->
<body ng-controller="FotosController">

<main class="container"><!-- Inicio do Container -->

  <div class="jumbotron"><!-- Jumbotron-->
        <h1 class="text-center">Alurapic</h1>
  </div><!-- Jumbotron -->

  <section class="row"><!-- Início da 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>
  </section><!-- Fim da Row-->


  <section 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>
  </section><!-- **Fim do panel group -->


</main> <!-- fim container -->

</body>
</html>

Segue o Main.js

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

por Erick

| 242.7k xp | 23 posts

Desenvolvedor

30/11/2016

O meu problema é que eu apliquei o two-way data binding, e o filter no ng-repeat, funcionou , porém no css, para fazer a transição , não está funcionando

por Flavio Henrique de Souza Almeida

| 3119.3k xp | 6969 posts

Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

30/11/2016

No seu arquivo main você não importou o modulo ngAnimate. Nem importou o módulo em index.

solução!

por Raphael Pacheco

| 175.7k xp | 13 posts

Analista de BI

30/11/2016

Olá Erik!

Pelo que ví em seu index.html, não foi importado o arquivo angular-animate.min.js.

Para que funcione, você precisará incluir a chamada deste arquivo após o angular.min.js ficando assim:

Outro ponto é que em seu main.js é necessário que passe a chamada do ngAnimate Ex: angular.module('alurapic', ['minhasDiretivas', 'ngAnimate']);

por Erick

| 242.7k xp | 23 posts

Desenvolvedor

30/11/2016

Ah ok, eh acabei de ver aqui , acabei me destraindo, desculpe, mas obrigado pela ajuda!!!