Isi*_*oGH 2 javascript animation angularjs ng-animate
我试图根据所涉及的视图将动画应用于ng-view(路由).
例如,从View1到View2,我需要View1从左侧离开,View1从右侧进入.否则,从View2到View1,我需要View2从右侧离开,View1从左侧进入.
但我也有需要在两个视图中应用不同动画的情况,例如,View1会逐渐淡出,而View2会进入缩放.
我正在做的是在ng-view中使用作用域关联变量作为类:
<div ng-view class="{{transition}}"></div>
在每个路径更改中设置此变量,并在每个控制器中使用以下内容:
$scope.transition=Global.transition;
$rootScope.$on("$routeChangeStart",function (event, current, previous) {
// Here I get the leaving view and the entering view and the kind of transition is selected
...
$scope.transition=selectedLeavingTransition; // Set the transition for the leaving view
Global.transition=selectedEnteringTransition; // Set the transition for the entering view
});
Global是一种服务,用于为离开范围设置输入范围的转换变量.
这样,当检测到路径更改时,使用与selectedLeavingTransition关联的类设置当前ng-view,并使用与selectedEnteringTransition关联的类设置输入ng-view.
例如,如果路径更改是从View1到View2,则动画期间的ng视图可以是:
<div ng-view class="fadeOut ng-animate ng-leave ng-leave-active"></div>
<div ng-view class="scaleUp ng-animate ng-enter ng-enter-active"></div>
在这种情况下,CSS可以是:
fadeOut.ng-leave {animation:1s fadeOut;}
scaleUp.ng-enter {animation:1s scaleUp;}
虽然它有效,但我想知道是否有更简单的方法来做它,因为它似乎有点乱.
一个不需要太多代码的替代解决方案是在您的路线上定义您的动画:
$routeProvider.when('/view1', {
templateUrl: 'view1.html',
controller: 'View1Controller',
animations: {
enter: 'enter-left',
leave: 'leave-left'
}
});
然后使用指令检索当前路径的动画并将它们添加到元素:
app.directive('viewAnimations', function ($route) {
return {
restrict: 'A',
link: function (scope, element) {
var animations = $route.current.animations;
if (!animations) return;
if (animations.enter) element.addClass(animations.enter);
if (animations.leave) element.addClass(animations.leave);
}
};
});
并将指令放在包含ngView指令的元素上:
<body ng-view view-animations></body>
演示:http://plnkr.co/edit/Y3ExDyiPIJwvVKO4njBT？p = preview
编辑:新解决方案.
要在运行期间设置动画,我会像你一样使用服务,但是要使用它们的指令.
非常基本的服务示例:
app.factory('viewAnimationsService', function ($rootScope) {
var enterAnimation;
var getEnterAnimation = function () {
return enterAnimation;
};
var setEnterAnimation = function (animation) {
enterAnimation = animation;
};
var setLeaveAnimation = function (animation) {
$rootScope.$emit('event:newLeaveAnimation', animation);
};
return {
getEnterAnimation: getEnterAnimation,
setEnterAnimation: setEnterAnimation,
setLeaveAnimation: setLeaveAnimation
};
});
指令:
app.directive('viewAnimations', function (viewAnimationsService, $rootScope) {
return {
restrict: 'A',
link: function (scope, element) {
var previousEnter, previousLeave;
var enterAnimation = viewAnimationsService.getEnterAnimation();
if (enterAnimation) {
if (previousEnter) element.removeClass(previousEnter);
previousEnter = enterAnimation;
element.addClass(enterAnimation);
}
$rootScope.$on('event:newLeaveAnimation', function (event, leaveAnimation) {
if (previousLeave) element.removeClass(previousLeave);
previousLeave = leaveAnimation;
element.addClass(leaveAnimation);
});
}
};
});
演示:http://plnkr.co/edit/DuQXaN2eYgtZ725Zqzeu？p = preview