कोणीयजेएस: एनजी-एनिमेट और एनजी-व्यू के साथ, 3 डी घन रोटेशन प्रभाव कैसे बनाएं?

Question

मैं एनजी-एनिमेट और एनजी-व्यू के साथ एक 3 डी क्यूब प्रभाव एनीमेशन प्राप्त करने की कोशिश कर रहा हूं।

जब मैं किसी अन्य पृष्ठ पर स्विच करता हूं, तो मुझे लगता है कि मैं घन पर घूम रहा हूं। जब मैं "गो पेज 2" ​​पर क्लिक करता हूं, तो वास्तविक "पृष्ठ 1" बाईं ओर घूमता है और घुमाएगा और "पृष्ठ 2" दाईं ओर से पहुंच जाएगा।

मुझे कुछ आ रहा है लेकिन वास्तव में गंदे सीएसएस संक्रमण के साथ और जब मैं पृष्ठों को स्विच करता हूं, तो वे एक साथ "छड़ी" नहीं होते हैं।

कोड का नमूना: 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> 

कोणीय जे एस:

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

आप में से किसी विचार है कि यह कैसे 3 डी घन प्रभाव एनीमेशन मिल सकता है?

सभी प्रकार की सहायता के लिए धन्यवाद जो आप प्रदान कर सकते हैं।

Answer 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 और activeNgAnimate के लिए उचित उपयोग इस व्यवहार को रोक देगा, लेकिन दुर्भाग्यवश यह नहीं है। मुझे लगता है कि active कक्षाओं को जोड़ने से पहले एंगुलर का उपयोग (वर्तमान में 1 मिलीसेकंड) में देरी बहुत कम है।

ps। मुझे लगता है कि आप पहले ही जानते थे, लेकिन यह आईई संगत नहीं है।

Answer 2

मैं सिर्फ उर सीएसएस संशोधित ... अगर यह बेहतर ... आगे

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