Javascript在Angular中切换高度动画
Javascript toggle animation of height in Angular
我在我的 Angular 应用程序中定义了以下动画,用于切换元素的高度/不透明度。
它按预期工作,但是我现在使用它来切换其中的"主菜单"和"子菜单"。
当主菜单打开时,它从 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();
}
};
}
]);
只要动画顺利打开和关闭,我愿意使用与上述不同的动画方法。
我能找到的所有"仅角度"滑动切换方法都存在问题(主要是由于子元素高度没有得到正确处理)。最后,我将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);
}
}
}
});
相关文章:
- 如何将高度动画设置为自动
- 如何设置'auto'JQuery动画中的高度
- 为矩形制作动画'它的高度应该上升,而不是下降
- 格林索克动画不适用于 SVG 高度
- 纯JavaScript - 定时动画 - 一致的高度
- 制作jQuery高度百分比动画
- jQuery在.show期间设置高度动画('幻灯片')
- jQuery动画到容器的高度
- 替换后将动画设置为高度0
- 动画渐变(javascript)背景不会延伸到窗口的整个高度
- 核心动画页面中的聚合物内容标签不会;t测量高度
- 页脚在滚动底部时没有设置高度动画
- CSS 切换过渡动画,自动高度不起作用
- 制作潜水高度动画
- Javascript在Angular中切换高度动画
- 设置高度动画时元素跳跃
- Div高度动画会导致Div在jQuery中更改对齐方式
- 在高度动画后获取回调
- Javascript高度动画问题
- 如何在jQuery中反转高度动画方向