AngularJS: z ng-animate & ng-view, jak zrobić efekt obracania kostki 3D?

Question

Próbuję uzyskać animację efektu kostki 3D z ng-animate i ng-view.

Po przejściu na inną stronę chciałbym poczuć się jakbym obracał się na kostce. Kiedy kliknę "Go Page 2", rzeczywista "Strona 1" opuści i obróci się w lewo, a "Strona 2" nadejdzie z prawej strony.

Mam coś zbliżonego, ale z naprawdę brudnymi przejściami CSS i kiedy przełączam strony, nie są one "sklejane" razem.

przykładowy kod: http://jsfiddle.net/bnyJ6/

Próbowałem tak:

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> 

kątowe 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- Animacja:

.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; 
} 

masz jakieś pojęcie, jak uzyskać ten efekt animacji 3D Cube?

Dzięki za wszelką pomoc, jaką możesz zapewnić.

Answer 1

chciałbym rzucać tym do pierścienia:

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; 
} 

Sztuką jest przesunięcie transform-origin po prawej stronie pierwszego elementu, a po lewej drugiego elementu, w ten sposób oba elementy zostaną przekształcone wokół tego samego punktu, dzięki czemu będą wyglądały, jakby były połączone.

Aby ostatecznie zadziałało, właściwości przejścia muszą być ukierunkowane osobno, w przeciwnym razie animowałoby to właściwość transform-origin, która wyglądałaby dobrze. Ktoś mógłby pomyśleć, że właściwe użycie klas setup i active dla NgAnimate uniemożliwiłoby to zachowanie, ale niestety tak nie jest. Przypuszczam, że opóźnienie, z którego korzysta Angular (obecnie 1 milisekunda) przed dodaniem klas active jest zbyt krótkie.

ps. Sądzę, że już wiesz, ale nie jest to zgodne z IE.

Answer 2

Właśnie zmodyfikowany ur css ... spojrzeć jeśli wygląda lepiej ... można poprawić dalej

http://jsfiddle.net/ctdrY/

Modified klasa

.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; 
}