关于angular的js动画执行问题,菜鸟求教。
刚接触angular的animate,自己写了个animate试了试,出了点问题,先上代码..
var animate = angular.module('phoneAnimations', []);
animate.animation('.phoness', function() { //这个是给ngview用的
return {
enter: function(element, done) {
element.css({
opacity: 0.5,
position: "relative",
top: '100px',
left: '200px'
}).animate({
top: 0,
left: 0,
opacity: 1
}, 1000, done)
}
}
})
animate.animation('.repeat-animation', function () { //这个是给那个repeat用的
return {
enter : function(element, done) {
console.log("entering...");
var width = element.width();
element.css({
position: 'relative',
left: '-100px',
opacity: 0
});
element.animate({
left: 0,
opacity: 1
}, done);
},
leave : function(element, done) {
element.css({
position: 'relative',
left: 0,
opacity: 1
});
element.animate({
left: '-100px',
opacity: 0
}, done);
},
move : function(element, done) {
element.css({
left: "50px",
opacity: 0.5
});
element.animate({
left: "0px",
opacity: 1
}, done);
}
}
});
代码如上,出现的问题是:ngview的动画可以实现,但是那个repeat的就无效,切换、筛选的时候也无效,只有把第一个动画,也就是ngview的注销掉就可以正常出现动画,这个是为什么?
还有一个问题是:使用angular的css动画的时候,也是设置了ngview和ngrepeat的动画,但是刚刷新的时候却只有ngview的动画会执行,有没有办法控制哪个先执行? 或者让刷新的时候执行ngrepeat的动画呢?
两个问题,初学者请多多保函。
还有个官方phone-cat案例源码中一段关于动画的,不打理解,接着上码
angular.
module('phonecatApp').
animation('.phone', function phoneAnimationFactory() {
return {
addClass: animateIn,
removeClass: animateOut
};
function animateIn(element, className, done) {
if (className !== 'selected') return;
element.css({
display: 'block',
position: 'absolute',
top: 500,
left: 0
}).animate({
top: 0
}, done);
return function animateInEnd(wasCanceled) {
if (wasCanceled) element.stop();
};
}
function animateOut(element, className, done) {
if (className !== 'selected') return;
element.css({
position: 'absolute',
top: 0,
left: 0
}).animate({
top: -500
}, done);
return function animateOutEnd(wasCanceled) {
if (wasCanceled) element.stop();
};
}
});
HTML是这样的
<div class="phone-images">
<img ng-src="{{img}}" class="phone"
ng-class="{selected: img === $ctrl.mainImageUrl}"
ng-repeat="img in $ctrl.phone.images" />
</div>
我不太理解这是怎么判断是增加还是移除类名的? 难道开始的return{addclass 和 removeClass这样就可以?这不是自定义的属性名?}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
怎么没人回答啊,大神哪去了?心好累啊