I'm trying to get the Animsition plugin working in an Angular project. The loader is stuck and the view doesn't load.
The jQuery plugin is in a directive, and works as separate HTML files without Angular routing. But I want to get it to work WITH Angular Router.
// In the directive, defaults were:
loadingParentElement : 'body',
overlayParentElement : 'body',
(and it worked fine without router + separate full html files with head/body/script tags to sources. But as separate views, I changed each view to have parent main elements, assuming they acted as parent body elements. But still didn't work.
app.js
var app = angular.module('MyApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'AppCtrl',
})
.when('/work', {
templateUrl: 'partials/work.html',
controller: 'AppCtrl',
})
.otherwise({
redirectTo: '/'
});
});
// the directive
app.directive('ngAnimsition', [function() {
return {
restrict: 'A',
scope: {
'model': '='
},
link: function(scope, elem, attrs) {
var $animsition = $(elem);
$animsition.animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
loading: true,
loadingParentElement: 'main', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'main',
transition: function(url) {
window.location.href = url;
}
});
}
}
}]);
index.html file
<!DOCTYPE html>
<html class="no-js" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Getting Animsition jQuery + Angular Router</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="js/animsition/animsition.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-controller="AppCtrl">
<!-- ng-router -->
<div ng-view></div>
<!-- tried below, but only does animsition on first load, not changing between views -->
<!-- <div ng-animsition class="animsition">
<!-- <div ng-view></div>
<!-- </div>
<!-- jquery -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<!-- Angular -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-router.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Partial home.html
<main>
<div ng-animsition class="row container animsition">
<nav>
<a ng-href="#/" class="active animsition-link">Home</a>
<a ng-href="#/work" class="animsition-link">Work</a>
</nav>
<div>
<h1>Home</h1>
</div>
</div>
</main>
Partial work.html
<main>
<div ng-animsition class="row container animsition">
<nav>
<a ng-href="#/" class="animsition-link">Home</a>
<a ng-href="#/work" class="active animsition-link">Work</a>
</nav>
<div>
<h1>Work</h1>
</div>
</div>
</main>
