AngularJS: con ng-animate & ng-view, come creare un effetto di rotazione cubo 3D?

Question

Sto cercando di ottenere un'animazione 3D a effetto cubo con ng-animate e ng-view.

Quando si passa a un'altra pagina, vorrei sentire come sto a rotazione su un cubo. Quando clicco su "Vai a Pagina 2", l'attuale "Pagina 1" lascerebbe e ruoterebbe verso sinistra e la "Pagina 2" arriverebbe da destra.

Ho qualcosa che si avvicina ma con transizioni CSS veramente sporche e quando cambio pagina, non sono "stick" insieme.

codice di esempio: http://jsfiddle.net/bnyJ6/

Ho provato in questo modo:

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> 

JS angolari:

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- Animazione:

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

Hai idea di come ottenere questo effetto di animazione 3D Cube?

Grazie per tutto il tipo di aiuto che è possibile fornire.

Answer 1

mi piacerebbe buttare questo sul ring:

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

Il trucco è spostare lo transform-origin a destra per il primo elemento e a sinistra per il secondo elemento, in questo modo entrambi gli elementi vengono trasformati nello stesso punto, facendolo apparire come se fossero collegati.

Al fine di farlo funzionare definitivamente, le proprietà di transizione devono essere mirate separatamente, altrimenti animerebbe anche la proprietà transform-origin, che sembrerebbe funky. Si potrebbe pensare che l'uso corretto delle classi setup e active per NgAnimate prevenga questo comportamento, ma sfortunatamente non lo fa. Immagino che il ritardo che Angular utilizza (attualmente 1 millisecondo) prima di aggiungere le classi active sia troppo breve.

ps. Immagino che tu lo sapessi già, ma questo non è compatibile con IE.

Answer 2

Ho appena modificato ur css ... dare un'occhiata se si guarda meglio ... può essere ulteriormente migliorata

http://jsfiddle.net/ctdrY/

classe Modified

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