AngularJS: как создать эффект вращения трехмерного куба с помощью ng-animate и ng-view?
Я пытаюсь получить 3D-анимацию с эффектом куба с помощью ng-animate и ng-view.
Когда я переключаюсь на другую страницу, я хотел бы чувствовать, что ям вращается на кубе. Когда я нажимаю "Перейти на страницу 2 ", Настоящий "Страница 1" уходил и вращался влево иСтраница 2" прибыл бы справа. Я
у меня что-то приближается, но с действительно грязными переходами CSS и когда я переключаю страницы, они не "придерживаться" все вместе.
Пример кода:http://jsfiddle.net/bnyJ6/I»
мы пробовали так:
HTML:
PAGE 1
Go Page 2
PAGE 1
Go page 1
Угловой 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{
-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?
Спасибо за любую помощь, которую вы можете оказать.