本文介绍了用内置的角度动画替换jQuery动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
给出此模板:
<div fade>
<h2>
TEST {{ headline.Title }}
</h2>
</div>
以及以下指令:
如何将此指令更改为 replace jquery 淡入淡出并内置 angular 动画?
And the following directive:How do I change this directive to replace the jquery fade with built in angular animations?
我需要文本淡入淡出
newman.directive('fade', ['$interval', function($interval) {
return function ($scope, element, attrs) {
$scope.index = 0;
$scope.news = $interval(function () {
// REPLACE JQUERY BELOW
$(element).fadeOut('fast', function() {
$scope.index = $scope.getValidNewHeadlineIndex();
// view is currently correctly updated by the line below.
$scope.headline = $scope.headlines[$scope.index];
$(element).fadeIn('slow'); // REPLACE JQUERY HERE TOO!
});
}, 10000);
}
}]);
推荐答案
基本上可以理解...
这是为任何使用angular-js动画而战的人的。有效的。
This is for anyone else battling with angular-js animation. A working CODEPEN.
基本程序是创建一些CSS来创建动画,然后将 $ animate.enter(...
的调用添加到'fade'
指令。
The basic procedure is to create some CSS to create the animation, and add a call to $animate.enter(...
to the 'fade'
directive.
$ animate.leave
似乎不是必需的,我将添加
$animate.leave
doesn't seem to be required. I will add more detail when I know more.
app.directive('fade', ['$animate', '$interval', function($animate, $interval) {
return function ($scope, element, attrs) {
$interval(function () {
$animate.enter(element, element.parent());
$scope.headline = $scope.next();
/* $animate.leave(element); */ // not required?
}, 6000);
}
}]);
样式表条目:
the style sheet entries:
.fade {
transition: 2s linear all;
-webkit-transition: 2s linear all;
}
.fade.ng-enter {
opacity: 0;
}
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
备用解决方案,使用TweenMax
此解决方案适合(您猜对了-Internet Explorer< 10)
app.directive('fade', ['$animate', '$interval', function($animate, $interval) {
var fadeOut = function(target, done){
TweenMax.to(
target, 0.2,/*{'opacity':'1',ease:Ease.linear},*/
{'opacity':'0',ease:Ease.linear, onComplete:done });
};
var fadeInUp = function(target){
var tl = new TimelineMax();
tl.to(target,0,{'opacity':'0',top:'+=50'})
.to(target,1,{'opacity':'1',top:'-=50',ease:Quad.easeOut});
};
return function ($scope, element, attrs) {
$interval(function () {
fadeOut(element, function() {
$scope.$apply(function() {
$scope.headline = $scope.next();
fadeInUp(element);
});
});
}, 4000);
}
}]);
这篇关于用内置的角度动画替换jQuery动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!