我正在尝试使用ng-animate和ng-view获取3D立方体效果动画。
当我切换到另一个页面时,我想感觉我在一个立方体上旋转。 当我点击“Go Page 2”时,实际的“Page 1”将离开并向左旋转,“Page 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立方体效果动画吗?
感谢您提供各种帮助。
答案 0 :(得分:11)
我想把它扔进戒指:
.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
属性设置动画,这看起来很时髦。有人会认为正确使用NgAnimate
的setup
和active
类可以防止这种行为,但不幸的是它没有。我想Angular在添加active
类之前使用的延迟(目前为1毫秒)太短了。
PS。我想你已经知道了,但这不兼容IE。
答案 1 :(得分:0)
我刚修改了你的css ...看看它看起来好不好......可以进一步改进
修改后的课程
.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;
}