我正在尝试使用 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>
角 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 效果动画吗?
感谢您提供的各种帮助。