var app = angular.module('app', ['ngRoute','ngAnimate']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when("/home", {redirectTo: "/"})
.when("/home", {templateUrl: "home.html", controller: "home"})
.when("/page1", {templateUrl: "page1.html", controller: "page1"})
.when("/page2", {templateUrl: "page2.html", controller: "page2"})
.otherwise({redirectTo: "/" });
$locationProvider.html5Mode(true);
}]);
app.controller('TimeLine', function($scope, $timeout){
// Enter
$timeout(function() {
$scope.initialize = true;
});
// Leave
$timeout(function() {
$scope.initialize = false;
}, 4000);
});
app.animation(".page", function() {
return {
enter: function(element, done){
TweenMax.from(element, 1, {autoAlpha: 0, scale: 0.5, onComplete:done});
},
leave: function(element, done){
TweenMax.to(element, 1, {autoAlpha: 0, scale: 0.5, onComplete:done});
}
};
});
app.controller('home', function($scope){
$scope.pageClass = 'page-home';
$scope.message = "HOME";
});
app.controller('page1', function($scope){
$scope.pageClass = 'page-1';
$scope.message = "PAGE 1";
});
app.controller('page2', function($scope){
$scope.pageClass = 'page-2';
$scope.message = "PAGE 2";
});
Simple navigation website with angularJS and Greensock tweenmax for transition pages
1 Response
How would the html?
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.