Я пытаюсь получить анимацию эффекта куба 3D с ng-animate и ng-view.
Когда я переключаюсь на другую страницу, я хотел бы чувствовать, что Im вращается на кубе. Когда я нажимаю "Go Page 2", фактическая "Страница 1" уйдет и повернется влево, а "Страница 2" появится справа.
У меня есть что-то приближающееся, но с действительно грязными переходами CSS, и когда я переключаю страницы, они не "приклеиваются" вместе.
Пример кода: http://jsfiddle.net/bnyJ6/
Я пробовал вот так:
HTML:
<style ng-bind-html-unsafe="style"></style>
<div class="cube container">
<div ng-view ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" ></div>
</div>
<script type="text/ng-template" id="page1.html">
<div class="container " >
<div class="masthead">
<h1 class="muted">PAGE 1</h1>
<button class="btn display-button" ng-click="direction('front');go('/two')">Go Page 2</button>
</div>
</div>
</script>
<script type="text/ng-template" id="page2.html">
<div class="container " >
<div class="masthead">
<h1 class="muted">PAGE 1</h1>
<button class="btn display-button" ng-click="direction('back');go('/one')" >Go page 1</button>
</div>
</div>
</script>
Angular JS:
var app = angular.module('demo', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/one', {
templateUrl:'page1.html'
})
.when('/two', {
templateUrl:'page2.html'
})
.otherwise({
redirectTo:'/one'
});
});
app.controller('MainCtrl', function($scope, $rootScope, $location) {
$scope.go = function(path) {
$location.path(path);
}
});
CSS3-Dirty-Animation:
.animation{
-webkit-perspective:2000px;
-moz-perspective:2000px;
-o-perspective: 2000px;
perspective: 2000px;
}
.cube {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.animate-enter,
.animate-leave {
-webkit-transition: 3000ms linear all;
-moz-transition: 3000ms linear all;
-ms-transition: 3000ms linear all;
-o-transition: 3000ms linear all;
transition: 3000ms linear all;
position: absolute;
}
.animate-enter {
background-color:green;
-webkit-transform: rotateY( 90deg ) translateZ(600px ) translateX(585px) ;
-moz-transform: rotateY( 90deg ) translateZ(600px ) translateX(585px);
-o-transform: rotateY( 90deg ) translateZ( 600px ) translateX(585px);
transform: rotateY( 90deg ) translateZ( 600px) translateX(585px);
opacity: 0;
}
.animate-enter.animate-enter-active{
background-color:yellow;
-webkit-transform: rotateY( 0deg ) translateX(250px) translateZ(400px );
-moz-transform: rotateY( 0deg ) translateX(250px) translateZ(400px );
-o-transform: rotateY( 0deg )translateX(250px) translateZ(401px );
transform: rotateY( 0deg ) translateX(250px) translateZ( 400px );
opacity: 1;
}
.animate-leave {
background-color:gray;
-webkit-transform: rotateY( -90deg ) translateZ( 361px );
-moz-transform: rotateY( -90deg ) translateZ( 361px );
-o-transform: rotateY( -90deg) translateZ( 361px );
transform: rotateY( -90deg) translateZ( 361px );
opacity: 0;
}
Есть ли у вас какое-нибудь представление о том, как получить эту анимацию 3D Cube?
Спасибо за любую помощь, которую вы можете предоставить.