Javascript切换Angular中高度的动画 [英] Javascript toggle animation of height in Angular
问题描述
我在Angular应用程序中定义了以下动画,用于切换元素的高度/不透明度。
I have the following animation defined in my Angular app for toggling the hight/opacity of an element.
它可以按预期工作,但是我现在正在使用它在主菜单和子菜单之间切换。
It works as expected, however I'm now using it to toggle a 'main menu' and the 'sub-menus' within.
打开主菜单时,它会从0增至X高度,然后如果我打开一个子菜单,主菜单保持在X高度,而我希望它扩展到主菜单的高度+新打开的子菜单的高度。
When the main menu is opened it increases from 0 to X height, then if I open a sub menu the main menu remains at X height, whereas I'd like it to expand to the height of the main menu + height of the newly opened sub-menu.
app.animation('.slide_toggle', ['$animateCss',
function ($animateCss) {
return {
addClass: function (element, className, done) {
if (className == 'ng-hide') {
var animator = $animateCss(element, {
to: { height: '0px', opacity: 0 }
});
if (animator) {
return animator.start().done(function () {
element[0].style.height = '';
done();
});
}
}
done();
},
removeClass: function (element, className, done) {
if (className == 'ng-hide') {
var height = element[0].offsetHeight;
var animator = $animateCss(element, {
from: { height: '0px', opacity: 0 },
to: { height: height + 'px', opacity: 1 }
});
if (animator) {
return animator.start().done(done);
}
}
done();
}
};
}
]);
我愿意使用与上述方法不同的动画方法,只要打开动画并
I'm open to using a different animation method to the one above as long as the animation opens and closes smoothly.
推荐答案
我可以找到的所有仅限角度滑动切换方法都存在问题(主要是由于子元素)高度未正确处理)。最后,我在项目中加入了jQuery,并从那里使用了全面的slideUp和slideDown功能:
There were problems with all the 'Angular only' slide toggle methods I could find (mainly due to child element heights not being dealt with properly). In the end I included jQuery in the project and used the comprehensive slideUp and slideDown functionality from there like so:
myApp.animation('.slide', function () {
return {
beforeAddClass: function (element, className, done) {
if (className === 'ng-hide') {
element.slideUp({ duration: 350 }, done);
}
},
removeClass: function (element, className, done) {
if (className === 'ng-hide') {
element.hide().slideDown({ duration: 350 }, done);
}
}
}
});
这篇关于Javascript切换Angular中高度的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!