<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngInclude with 3D css keyframes</title>
</head>
<body>
<link href="style.css" rel="stylesheet"/>
<div ng-controller="animationsCtrl as ac">
<h1>AngularJS ngInclude with 3D css keyframes</h1>
<p>Choose one template</p>
<select ng-model="theTemplate" ng-options="item.name for item in ac.templateArray"></select>
<div class="ngIncludeWrapper">
<div class="ngIncludeItem" ng-include="theTemplate.url"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('animationsCtrl', function($scope) {
var self = this;
self.templateArray = [{
name: 'first',
url: 'first.html'
}, {
name: 'second',
url: 'second.html'
}];
})
</script>
</body>
</html>
<div>
<h2>First page</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur dui nunc, vel feugiat lectus imperdiet et. In hac habitasse platea dictumst. In rutrum malesuada justo, sed porttitor dolor rutrum eu. Sed condimentum tempus est at euismod. Donec in faucibus urna. Fusce fermentum in mauris at pretium. Aenean ut orci nunc. Nulla id velit interdum nibh feugiat ultricies eu fermentum dolor. Pellentesque lobortis rhoncus nisi, imperdiet viverra leo ullamcorper sed. Donec condimentum tincidunt mollis. Curabitur lorem nibh, mattis non euismod quis, pharetra eu nibh.
</p>
</div>
<div>
<h2>Second page</h2>
<p>
Ut eu metus vel ipsum tristique fringilla. Proin hendrerit augue quis nisl pellentesque posuere. Aliquam sollicitudin ligula elit, sit amet placerat augue pulvinar eget. Aliquam bibendum pulvinar nisi, quis commodo lorem volutpat in. Donec et felis sit amet mauris venenatis feugiat non id metus. Fusce leo elit, egestas non turpis sed, tincidunt consequat tellus. Fusce quis auctor neque, a ultricies urna. Cras varius purus id sagittis luctus. Sed id lectus tristique, euismod ipsum ut, congue augue.
</p>
</div>
.ngIncludeWrapper {
position: relative;
height: 500px;
overflow: hidden;
perspective: 600px;
}
.ngIncludeItem {
position: absolute;
width: 500px;
display: block;
margin: 10px;
padding: 10px;
}
@-webkit-keyframes enter-animation {
from {
transform: translateZ(-700px);
animation-timing-function: ease;
opacity: 0;
}
to {
transform: translateZ(0px);
animation-timing-function: ease;
opacity: 1;
}
}
@-webkit-keyframes leave-animation {
from {
transform: translateZ(0px);
animation-timing-function: ease;
opacity: 1;
}
to {
transform: translateZ(700px);
animation-timing-function: ease;
opacity: 0;
}
}
@keyframes enter-animation {
from {
transform: translateZ(-700px);
animation-timing-function: ease;
opacity: 0;
}
to {
transform: translateZ(0px);
animation-timing-function: ease;
opacity: 1;
}
}
@keyframes leave-animation {
from {
transform: translateZ(0px);
animation-timing-function: ease;
opacity: 1;
}
to {
transform: translateZ(700px);
animation-timing-function: ease;
opacity: 0;
}
}
.ngIncludeItem.ng-enter {
-webkit-animation-name: enter-animation;
-webkit-animation-duration: 1s;
animation-name: enter-animation;
animation-duration: 1s;
}
.ngIncludeItem.ng-leave {
-webkit-animation-name: leave-animation;
-webkit-animation-duration: 1s;
animation-name: leave-animation;
animation-duration: 1s;
}