长期读者,第一次海报。 我希望在单击时将物质汉堡包转换为“X”,然后在 Angular 应用程序中再次单击时转换回来。网址https://material.io/design/iconography/animated-icons.html#transitions 显示有我想要的动画,但没有关于如何做的文档。
我尝试了一种 CSS 方法,但它没有显示,最好让项目与 Material 图标保持一致。
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
CSS
navbar-toggle {
border: none;
background: transparent !important;
&:hover {
background: transparent !important;
}
.icon-bar {
width: 22px;
transition: all 0.2s;
}
.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.middle-bar {
opacity: 0;
}
.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
}
.navbar-toggle.collapsed {
.top-bar {
transform: rotate(0);
}
.middle-bar {
opacity: 1;
}
.bottom-bar {
transform: rotate(0);
}
}
以上代码是 Material 图标的变通方法。当我运行上面的代码时,我得到一个没有动画的透明按钮。如果有人知道如何使用 bootstrap 从汉堡包过渡到 Angular “X”,我将不胜感激。
最佳答案
我让这个变得简单了 stackblitz仅使用 Angular 动画(无 Bootstrap )仍然需要在动画状态的 CSS 中做一些工作才能使其美观流畅,但您可以理解这一点。
关于angular - 动画 Material 图标转换 : Hamburger to X,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56659150/