AngularJS：使用 ng-animate & ng-view，如何制作 3D 立方体旋转效果？

Posted 2023-03-06

【中文标题】AngularJS：使用 ng-animate & ng-view，如何制作 3D 立方体旋转效果？

【英文标题】：AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

【发布时间】：2013-07-10 23:05:37

【问题描述】：

我正在尝试使用 ng-animate 和 ng-view 获得 3D 立方体效果动画。

当我切换到另一个页面时，我想感觉自己在一个立方体上旋转。 当我单击“转到第 2 页”时，实际的“第 1 页”将离开并向左旋转，“第 2 页”将从右侧到达。

我有一些东西正在接近，但 CSS 过渡非常脏，当我切换页面时，它们并没有“粘”在一起。

代码示例：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>

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


    -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 Cube 效果动画吗？

感谢您提供的各种帮助。

【参考方案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 和 active 类为 NgAnimate 会阻止这种行为，但不幸的是它不会。我猜 Angular 在添加 active 类之前使用的延迟（当前为 1 毫秒）太短了。

ps。我猜你已经知道了，但这不兼容 IE。

【讨论】：

哇！！棒极了 ！太感谢了 ！！您的 cmets 非常有帮助！我找不到技巧和你解释它的方式，一切都变得清晰了！！

【参考方案2】：

我刚刚修改了你的css...看看它是否看起来更好...可以进一步改进

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;