AngularJS：with ng-animate& ng-view，如何使3D立方体旋转效果？ [英] AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?
问题描述
我想用ng-animate和ng-view来获得3D立方体效果动画。
I'm trying to get a 3D cube effect animation with ng-animate and ng-view.
当我切换到另一个页面时，我想感觉就像我在一个立方体上旋转。
当我点击Go Page 2时，实际的Page 1将离开并向左旋转，Page 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.
程式码范例： 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立方体效果动画吗？
Have you any idea of how get this 3D Cube effect animation?
感谢您提供的各种帮助。
Thanks for all kind of help you can provide.
推荐答案
我想把它扔进圈子：
.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 到第一个元素的右边，第二个元素的左边，这样两个元素都围绕同一点变换，使它看起来好像它们是连接的。
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.
为了使它最终工作，过渡属性需要单独定位，否则它会动画化 transform-origin 属性，看起来很时髦。人们会认为正确使用的 setup 和 active nganimate.org/rel =noreferrer> NgAnimate 会阻止这种行为，但不幸的是它不会。我猜想在添加活动类之前Angular使用的延迟（目前为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：with ng-animate& ng-view，如何使3D立方体旋转效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
