Javascript以角度切换高度动画
我在Angular应用程序中定义了以下动画,用于切换元素的高度/不透明度 它按预期工作,但是我现在使用它来切换“主菜单”和其中的“子菜单” 当主菜单打开时,它从0增加到X高度,然后如果我打开一个子菜单,主菜单将保持X高度,而我希望它扩展到主菜单的高度+新打开子菜单的高度Javascript以角度切换高度动画,javascript,angularjs,css-animations,ng-animate,Javascript,Angularjs,Css Animations,Ng Animate,我在Angular应用程序中定义了以下动画,用于切换元素的高度/不透明度 它按预期工作,但是我现在使用它来切换“主菜单”和其中的“子菜单” 当主菜单打开时,它从0增加到X高度,然后如果我打开一个子菜单,主菜单将保持X高度,而我希望它扩展到主菜单的高度+新打开子菜单的高度 app.animation('.slide_toggle', ['$animateCss', function ($animateCss) { return { addClass: function (e
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();
}
};
}
]);
只要动画顺利打开和关闭,我愿意使用与上面不同的动画方法。我能找到的所有“仅角度”滑动切换方法都存在问题(主要是由于未正确处理子元素高度)。最后,我在项目中加入了jQuery,并使用了全面的slideUp和slideDown功能,如下所示:
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);
}
}
}
});