AngularJS: mit ng-animate & ng-view, wie macht man einen 3D-Würfel-Rotationseffekt?

Question

Ich versuche, eine 3D-Cube-Effekt-Animation mit ng-animate und ng-view zu erhalten.

Wenn ich zu einer anderen Seite wechsle, würde ich gerne das Gefühl haben, als würde ich mich auf einem Würfel drehen. Wenn ich auf "Go Page 2" klicke, würde die eigentliche "Page 1" verlassen und nach links rotieren und die "Page 2" würde von rechts ankommen.

Ich habe etwas nähert sich, aber mit wirklich schmutzigen CSS-Übergängen und wenn ich Seiten umschalte, sind sie nicht "kleben" zusammen.

Codebeispiel: http://jsfiddle.net/bnyJ6/

Ich habe wie folgt versucht:

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

Haben Sie eine Vorstellung davon, wie sie erhalten einen 3D Cube-Effekt-Animation?

Vielen Dank für Ihre Hilfe.

Answer 1

Ich möchte werfen dies in den 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; 
} 

Der Trick besteht darin, die transform-origin für das erste Element nach rechts und für das zweite Element nach links zu verschieben, so dass beide Elemente um den gleichen Punkt transformiert werden, so dass es aussieht, als wären sie verbunden.

Damit es endlich funktioniert, müssen die Übergangseigenschaften separat ausgerichtet werden, sonst würde es die transform-origin Eigenschaft animieren, die funky aussehen würde. Man würde denken, dass die richtige Verwendung von setup und active Klassen für NgAnimate dieses Verhalten verhindern würde, aber leider nicht. Ich denke, die Verzögerung, die Angular verwendet (derzeit 1 Millisekunde), bevor die active Klassen hinzugefügt werden, ist zu kurz.

ps. Ich nehme an, du wusstest schon, aber das ist nicht IE-kompatibel.

Answer 2

I ur CSS nur geändert ... haben Sie einen Blick, ob es besser ... sieht

weiter verbessert werden kann

http://jsfiddle.net/ctdrY/

Modified Klasse

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