AngularJS：与NG-动画和放大器; NG-观点，如何使3D立方体旋转效果？ [英] AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

问题描述

我试图让与NG-动画和NG-视图的3D立方体效果动画。

I'm trying to get a 3D cube effect animation with ng-animate and ng-view.

当我切换到另一个网页，我想感觉我在旋转的立方体。
当我点击转到页2，实际的1将离开并向左旋转和​​第2页会从右侧到达。

When I switch to another page, I would like to feel like I’m rotating on a cube. When I click on "Go Page 2", the actual "Page 1" would leave and rotate to the left and the "Page 2" would arrive from the right.

我有东西接近但真脏CSS过渡，当我切换页面，他们不是粘在一起。

I’ve got something approaching but with really dirty CSS transitions and when I switch pages, they are not "stick" together.

code样品：<​​a href=\"http://jsfiddle.net/bnyJ6/\"> 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>

角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魔方效果动画？

Have you any idea of how get this 3D Cube effect animation?

感谢所有样的帮助，您可以提供。

Thanks for all kind of help you can provide.

推荐答案

我想扔到环这样的：

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

关键是要转移变换原产地为第一要素的权利，并给左侧的第二个元素，这样，这两个元素都是围绕转变同一点，使它看起来好像他们连接起来。

The trick is to shift the transform-origin to the right for the first element, and to the left for the second element, that way both elements are transformed around the same point, making it look as if they were connected.

为了使它终于工作，过渡属性，需要单独有针对性的，否则会使动画变换原产地属性太，这看起来时髦。有人会认为，正确使用设置和活跃类的<​​a href =HTTP：// WWW。 nganimate.org /> NgAnimate 将prevent这种行为，但遗憾的是它没有。我想这角用途（目前为1毫秒）添加前主动类太短的延迟时间。

In order to make it finally work, the transition properties need to be targeted separately, otherwise it would animate the transform-origin property too, which would look funky. One would think that the proper use of setup and active classes for NgAnimate would prevent this behaviour, but unfortunately it doesn't. I guess the delay that Angular uses (currently 1 millisecond) before adding the active classes is too short.

PS。我想你已经知道，但这不是IE浏览器兼容。

ps. I guess you already knew, but this is not IE compatible.

这篇关于AngularJS：与NG-动画和放大器; NG-观点，如何使3D立方体旋转效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！