AngularJS：使用ng-animate＆ng-view，如何製作3D立方體旋轉效果？

我想用ng-animate和ng-view來獲得3D立體效果動畫。AngularJS：使用ng-animate＆ng-view，如何製作3D立方體旋轉效果？

當我切換到另一個頁面時，我想感覺我正在旋轉一個立方體。當我點擊「Go Page 2」時，實際的「Page 1」會離開並向左旋轉，而「Page 2」會從右側到達。

我已經接近了一些東西，但是真的很髒的CSS轉換，當我切換頁面時，它們不會「粘」在一起。

我已經試過這樣：

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：

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

你有任何想法如何得到這個3D魔方效果動畫？

感謝您提供的各種幫助。

來源

2013-07-12 simval

我想扔這個到環：

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將防止這種行爲，但不幸的是它不。我猜想在添加active類之前，Angular使用的延遲（當前爲1毫秒）太短。

ps。我想你已經知道了，但這不是IE兼容的。

來源

2013-07-13 03:09:31 ndm

哇！太棒了！非常感謝！！您的意見非常有幫助！我找不到技巧和解釋方式，一切都變得清晰起來！ – simval

我只是修改烏爾三網融合看看，如果它看起來更好......可以進一步

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

來源

2013-07-12 12:04:39 iJade

這就是想法，ndm做到了我想要的！ thxs！ :) – simval

AngularJS：使用ng-animate＆ng-view，如何製作3D立方體旋轉效果？

回答

相關問題