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

Dúvida no Ex. 6 da Aula 4 - Melhorando a experiência do usuário

Olá! Estou com um problema para fazer as animações da transição. Aparentemente, está tudo certo, inclusive com todos os scripts sendo carregados na página. Seguem meus códigos:

/*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/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 ng-model="filtro.titulo" class="form-control" ng-model-options="{debounce : 100}" placeholder="Filtrar" type="text" />
                    </form>
                </div>
            </div>
            <div class="row">
                <meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}" imagem="{{foto.url}}" />
            </div>

        </div>     
    </body>
</html>

/*main.js*/
angular.module('alurapic', ['minhasDiretivas', 'ngAnimate']);

Alguém faz alguma ideia porque as animações não funcionam?

18 respostas

Onde está seu efeitos.css? Qual seu navegador?

Estou usando chrome, mas testei no ie r no edge. A folha de estilos é a mesma que foi disponibilizada na pasta com os arquivos do curso

Não era para ter esse arquivo na pasta do curso. Era para o aluno ter criado. Colê o conteúdo dela aqui. Vou remover do projeto.

Zilhoes de pessoas já passaram dessa parte sem problema algum.

Vc está usando Windows 10? Ele é bugado .

Aguardo o envio do codigo e um teste no Firefox que não buga no Windows 10.

No aguardo

Você verificou o Log do chrone?

Sim, estou usando windows 10 mesmo. Como não gosto muito do firefox, acabei nem testando nele, mas assim que tiver acesso ao projeto testo novamente.

O código do css é esse aqui:

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

Não verifiquei o log, apenas verifiquei se não tinha nenhum erro na execução.

Certo. Só testa depois firefox. Porém. E não deixe de olhar Log do navegador. Eu estou ciente do seu problema é darei uma olhada com carinho asdim que chegar no meu Mac.

Fique tranquilo que a gente descobre. Mas só não esquece de ver Log do Chrome.

Certo. Só testa depois firefox. Porém. E não deixe de olhar Log do navegador. Eu estou ciente do seu problema é darei uma olhada com carinho assim que chegar no meu Mac.

Fique tranquilo que a gente descobre. Mas só não esquece de ver Log do Chrome.

Pode deixar ;) valeu pela resposta e pelo curso... Muito boa sua didática e os exemplos também estão de fácil assimilação

Eu fiz um teste com seu HTML, inclusive sua declaração com main.js e funcionou no meu mac usando Chrome e Firefox.

Vamos guiar nossos testes por partes:

1) Windows 10 e Chrome havia um bug que não me recordo qual era. Você atualizou o Chrome?

2) Teste no Firefox, esse não havia bug nenhum no Windows 10.

3) Se ainda continuar com o problema, eu preciso do seu projeto compactador sem a pasta node_modules para que eu possa ver se há alguma coisa corrompida etc. Se eu rodar o projeto sem alteração em minha máquina, ainda pode ser algum problema no Windows 10 e nos navegadores desta plataforma. Meu e-mail é flavio.almeida@caelum.com.br. Quando enviar, renomeie o arquivo .zip para .txt, caso contrário o Gmail se recusará a enviar.

Vou fazer um teste no linux então... inclusive, acho que vou prosseguir o curso pelo linux, já que tenho ubuntu em dual boot na minha máquina... não sei se vou conseguir te passar hoje mas amanhã com certeza eu consigo... Obrigado!

Tranquilo, eu fico aguardando. Você pode continuar no Windows, só essa parte de animação que preciso investigar no Windows 10 + Chrome ou Edge.

Oi Cleber, ainda não consegui um Windows 10, mas não esqueci do seu problema não. Vai tocando o treinamento, melhor ainda se você me enviar por e-mail o projeto sem a pasta Node_Modules totalmente para simular perfeito.

Opa Flavio... te envio hoje a noite ;)

solução!

Descobri o problema do seu código. Ele não funcionou aqui também e por isso não é bug do Chrome ou do Windows 10.

O problema é muito simples. O arquivo efeitos.css não está correto. Ele estava assim:

.painel-animado .ng-leave-active {

}

Há um espaço entre as duas classes e isso é seletor hierárquivo. Ele procura o elemento com a classe ng-leave-active dentro de um elemento com a classe painel-animado e nunca teremos um dentro do outro.

O correto é:

.painel-animado.ng-leave-active {

}

Veja que uma classe está grudada na outra. Agora, segundo os princípios do CSS, apenas elementos que tiverem as duas classes ao mesmo tempo serão selecionadas.

Você disse que o projeto baixado (no primeiro capítulo) pelo site já tinha o o arquivo efeitos.css, eu baixei o projeto e lá o código está correto.

Por algum motivo você adicionou esse espaçamento, provavelmente tentando resolver outro problema.

Mistério resolvido!

Aguardo seu feedback!

Aproveitei e remove aquele efeitos.css que estava no primeiro arquivo do projeto. A intenção é o aluno criar na mão.

Maravilha Flavio! Devo ter colocado o espaço mesmo.. acho que nunca tinha usado css com 2 classes no mesmo seletor para o mesmo objeto e quando vi o código, achei estranho e dei o espaço.. muito obrigado pela atenção!

Agora é continuar com o treinamento. Marquei minha resposta como solução para fecharmos essa dúvida. Bom estudo!

Ola Flavio, estou com o mesmo problema da Animação, ela não esta funcionado!!

Erick, sim, mas cadê deu código? Abra um post novo com sua dúvida e seu código para que eu e outros possam analisar.