用angular7和Bootstrap4折叠导航栏

时间:2019-02-09 22:33:37

标签: angular bootstrap-4 navbar

我正在尝试在具有移动屏幕尺寸的情况下使用正确的折叠动画制作导航栏。

我一直在关注本教程:https://angularfirebase.com/lessons/bootstrap-4-collapsable-navbar-work-with-angular/#ui-top-nav-component-html 并设法使这项工作。但是,如您在示例中所见,首先出现一个块,然后滑动文本。当然,我想像引导文档(Bootstrap navbar)一样同时显示文本和块幻灯片-要查看它,您只需要缩小窗口并按导航栏按钮以查看菜单崩溃得很顺利。

是否可以通过动画或其他方式?

1 个答案:

答案 0 :(得分:0)

您可以通过角度动画或纯CSS实现。用.navbar-collapse类在div上以过渡高度切换类就足够了。

我会说这是一件很小的事情,因此它实际上并不需要角度解,但是在这里我可能是错的。如果您想阅读何时使用CSS以及何时使用角度动画,可以预览答案here.