Animoitu viahto infoscreeniin.

This commit is contained in:
Juuso Käenmäki
2016-08-30 03:06:26 +03:00
parent 9f6f0aeaf4
commit 77612d5675
3 changed files with 27 additions and 8 deletions
+17 -1
View File
@@ -18,4 +18,20 @@
display: block;
margin-left: auto;
margin-right: auto;
}
}
.swap-animation.ng-enter, .swap-animation.ng-leave {
transition:0.5s linear all;
}
.swap-animation.ng-enter {
opacity:0;
}
.swap-animation.ng-enter-active {
opacity:1;
}
.swap-animation.ng-leave {
opacity:1;
}
.swap-animation.ng-leave-active {
opacity:0;
}
@@ -1,9 +1,9 @@
var app = angular.module('infoApp', []);
var app = angular.module('infoApp', ['ngAnimate']);
app.controller('infoscreen_main', function($scope, $http,$timeout){
var index = -1;
app.controller('infoscreen_main', function($scope,$timeout){
$scope.index = -1;
var templates = [
{
template: "/static/html/test1.html?img=siklogo",
@@ -17,8 +17,8 @@ app.controller('infoscreen_main', function($scope, $http,$timeout){
},
];
$scope.next = function(){
index = (index + 1) % templates.length;
$scope.active = templates[index];
$scope.index = ($scope.index + 1) % templates.length;
$scope.active = templates[$scope.index];
$timeout($scope.next,5000);
}
$scope.next()
+5 -2
View File
@@ -7,6 +7,7 @@
<title>Infoscreen</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
@@ -15,8 +16,10 @@
<script src="/static/js/infoscreen_controllers.js"></script>
</head>
<body>
<div ng-controller="infoscreen_main" >
<div id="infocontent" ng-include="active.template" onload="active.onload()"></div>
<div class="container ng-scope" ng-controller="infoscreen_main" >
<div ng-animate-swap="index" class="cell swap-animation">
<div id="infocontent" ng-include="active.template" onload="active.onload()"></div>
</div>
</div>
</body>
</html>