AngularJS: с ng-animate & ng-view, как сделать эффект вращения 3D-куба?

Я пытаюсь получить анимацию эффекта куба 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?

Спасибо за любую помощь, которую вы можете предоставить.

Ответ 1

Я хотел бы бросить это на ринг:

http://jsfiddle.net/bnyJ6/1/

.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 -webkit-transform, 3000ms linear opacity, 3000ms linear background-color;
    -moz-transition: 3000ms linear -moz-transform, 3000ms linear opacity, 3000ms linear background-color;
    -o-transition: 3000ms linear -o-transform, 3000ms linear opacity, 3000ms linear background-color;
    transition: 3000ms linear transform, 3000ms linear opacity, 3000ms linear background-color;
    position: absolute;
}

.animate-enter {
    background-color: green;

    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;

    -webkit-transform: translateX(100%) rotateY(90deg);
    -moz-transform: translateX(100%) rotateY(90deg);
    -o-transform: translateX(100%) rotateY(90deg);
    transform: translateX(100%) rotateY(90deg);

    opacity: 0;
}
.animate-enter.animate-enter-active {
    background-color: yellow;

    -webkit-transform: translateX(0%) rotateY(0deg);
    -moz-transform: translateX(0%) rotateY(0deg);
    -o-transform: translateX(0%) rotateY(0deg);
    transform: translateX(0%) rotateY(0deg);

    opacity: 1;
}

.animate-leave {
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.animate-leave.animate-leave-active {
    background-color: gray;

    -webkit-transform: translateX(-100%) rotateY(-90deg);
    -moz-transform: translateX(-100%) rotateY(-90deg);
    -o-transform: translateX(-100%) rotateY(-90deg);
    transform: translateX(-100%) rotateY(-90deg);

    opacity: 0;
}

Трюк состоит в том, чтобы сдвинуть transform-origin вправо для первого элемента, а влево для второго элемента, таким образом, оба элемента преобразуются вокруг одной и той же точки, заставляя его выглядеть так, как будто они были связаны.

Чтобы сделать работу окончательно, свойства перехода должны быть нацелены по отдельности, иначе он будет анимировать свойство transform-origin, которое будет выглядеть фанк. Можно подумать, что правильное использование классов setup и active для NgAnimate могло бы предотвратить это поведение, но, к сожалению, оно не, Я предполагаю, что задержка, которую Angular использует (в настоящее время 1 миллисекунду), перед добавлением классов active слишком короткая.

пс. Я думаю, вы уже знали, но это не совместимо с IE.

Ответ 2

Я только что изменил ur css... посмотрю, выглядит ли он лучше... может быть улучшено далее

http://jsfiddle.net/ctdrY/

Измененный класс

    .animate-enter.animate-enter-active{
    background-color:yellow;

    -webkit-transform: rotateY(  0deg ) translateX(50px) translateZ(400px );
    -moz-transform: rotateY(  0deg ) translateX(50px) translateZ(400px );
    -o-transform: rotateY(  0deg )translateX(50px) translateZ(401px );
    transform: rotateY(  0deg )  translateX(50px) translateZ( 400px );
    opacity: 1;
}