Pessoal estou desenvolvendo uma aplicação mobile usando angular, e estou tentando montar uma linha do tempo como esta:
http://rp.js.org/angular-timeline/example/index.html documentação aqui: https://github.com/rpocklin/angular-timeline
o problema é que a diretiva angular-scroll-animate não está disparando quando há rolamento da página, e eu não faço idéia do que pode ser, a seguir meu código:
Controller:
angular.module('timeline', [
'angular-timeline',
'angular-scroll-animate'
])
.controller("TimeLineController", [
"$scope",
function ($scope) {
$scope.events = [
{
badgeClass: 'warning',
badgeIconClass: 'ion-information',
title: 'titulo',
content: 'conteúdo'
},
{
badgeClass: 'danger',
badgeIconClass: 'ion-heart',
title: 'titulo',
content: 'conteúdo'
},
{
badgeClass: 'primary',
badgeIconClass: 'ion-android-calendar',
title: 'titulo',
content: 'conteúdo'
}
];
$scope.animateElementIn = function ($el) {
$el.removeClass('hidden');
$el.addClass('animated fadeInRight '); // this example leverages animate.css classes
};
$scope.animateElementOut = function ($el) {
$el.addClass('hidden');
$el.removeClass('animated fadeOutRight '); // this example leverages animate.css classes
};
}]);
CSS
<style>
.hidden { visibility: hidden; }
</style>
HTML
<ion-view view-title="Linha do Tempo">
<ion-content>
<timeline>
<timeline-event ng-repeat="(key,event) in events" side="">
<div when-visible="animateElementIn" when-not-visible="animateElementOut" delay-percent="0.50" class="hidden">
<timeline-badge class="{{event.badgeClass}}">
<i class="glyphicon {{event.badgeIconClass}}"></i>
</timeline-badge>
<timeline-panel class="{{event.badgeClass}}">
<timeline-heading>
<h4>{{key+1}}º - {{event.title}}</h4>
</timeline-heading>
<p>{{key+1}}º - {{event.content}}</p>
</timeline-panel>
</div>
</timeline-event>
</timeline>
</ion-content>
Desculpe se não segui alguma regra com a pergunta estou começando agora Desde já agradeço a ajuda !