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