Javascript 在 Angular 中切换高度动画
Javascript toggle animation of height in Angular
我在我的 Angular 应用程序中定义了以下动画,用于切换元素的 hight/opacity。
它按预期工作,但是我现在用它来切换 'main menu' 和其中的 'sub-menus'。
当主菜单打开时,它从 0 增加到 X 高度,然后如果我打开子菜单,主菜单保持在 X 高度,而我希望它扩展到主菜单的高度 +新打开子菜单的高度。
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();
}
};
}
]);
我愿意使用与上述方法不同的动画方法,只要动画打开和关闭顺畅即可。
我能找到的所有 'Angular only' 滑动切换方法都有问题(主要是由于未正确处理子元素高度)。最后,我将 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);
}
}
}
});
我在我的 Angular 应用程序中定义了以下动画,用于切换元素的 hight/opacity。
它按预期工作,但是我现在用它来切换 'main menu' 和其中的 'sub-menus'。
当主菜单打开时,它从 0 增加到 X 高度,然后如果我打开子菜单,主菜单保持在 X 高度,而我希望它扩展到主菜单的高度 +新打开子菜单的高度。
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();
}
};
}
]);
我愿意使用与上述方法不同的动画方法,只要动画打开和关闭顺畅即可。
我能找到的所有 'Angular only' 滑动切换方法都有问题(主要是由于未正确处理子元素高度)。最后,我将 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);
}
}
}
});