javascript - 如何使用 Angular Animations 或使用 css 在 ng-bootstrap 中制作下拉滑动动画?
问题描述
我正在尝试使用 Angular Animations 为 ng-bootstrap 的下拉菜单设置动画,虽然动画在开发中运行良好,但在生产中,当菜单打开时,它会出于某种原因从下拉菜单的顶部跳到底部。这是我的代码:
动画:
trigger('openClose', [
transition('closed => open', [
style({ opacity: 0, transform: 'translateY(-30px)'}),
animate('100ms ease-out',
style({opacity: '*', transform: 'translateY(0)'}))
]),
transition('open => closed', [
style({ opacity: '*', transform: 'translateY(0)'}),
animate('100ms ease-out',
style({opacity: 0, transform: 'translateY(-30px)'}))
])
])
零件:
<div ngbDropdown
class="d-inline-block w-100">
<!-- dropdown button -->
<button class="dropdown-button btn btn-icon-right"
type="button"
ngbDropdownToggle>
<span>
<span>my title</span>
</span>
</button>
<!-- dropdown menu -->
<div ngbDropdownMenu
class="dropdown-menu"
[@openClose]="isOpen ? 'open' : 'closed'">
my content
</div>
</div>
关闭时的动画也不起作用。我已经尝试在:enter
and:leave
和上制作动画void
,它们也不起作用。知道问题可能出在哪里,或者如何正确地为 ngbDropdown 设置动画?有没有办法只使用 css 对其进行动画处理?
解决方案:问题是在生产中由于某种原因下拉菜单被设置为使用transform: translateY(0)
,而在开发中它被设置为使用top: 0
。所以要制作一个向下滑动的动画,你必须top
在 prod 和transform
dev 中使用。为了解决这个问题,我不得不dropdown-menu
用我自己的类来覆盖。这是一个使用 css 的 hacky 解决方案,直到 ngbootstrap 团队添加动画:
HTML:
<div ngbDropdown
class="dropdown"
(openChange)="openChange($event)"
#dropdown>
<!-- dropdown button -->
<button class="dropdown-button btn"
[ngClass]="buttonClass"
[disabled]="disabled"
type="button"
ngbDropdownToggle>
<span> My Title </span>
</button>
<!-- dropdown menu -->
<div ngbDropdownMenu
class="dropdown-menu2" // this is important to override the ngb class
[ngClass]="dropdownOpenClass"
#dropdownMenu>
<ng-content></ng-content>
</div>
</div>
萨斯:
.dropdown-menu2 {
display:block;
visibility: collapse;
transition: all .2s ease-in-out;
top: 0 !important;
&.dd-closed {
visibility: hidden;
opacity: 0;
transform: translateY(20px) !important; // overwrite prod on closed
}
&.dd-open {
visibility: visible;
opacity: 1;
transform: translateY(38px);
}
}
TS:
dropdownOpenClass = 'dd-closed';
openChange(e: Event) {
this.isOpen = !this.isOpen;
this.dropdownOpenClass = this.isOpen ? 'dd-open' : 'dd-closed';
this.openChanged.emit(e);
}
更新:上面的解决方法在 4.1.0+ 中不起作用。如果有人有解决方案,请在下面发布。
解决方案
研究'一种仅使用 css 对其进行动画处理的方法'......我们必须解决默认的引导类:
- bootstrap 中的下拉菜单类,默认情况下隐藏下拉菜单
- 显示下拉菜单的显示类
- 我们必须把它拿在手中,我们使用 ngStyle
- 我们还创建了用于慢速显示和慢速隐藏的类...为了切换这些,我们创建了一个变量并使用了 ngClass
- 要调整持续时间效果,您可以更改这些类以获得您想要的确切效果
HTML
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="dropDownClicked()">Toggle dropdown</button>
<div
[ngStyle]="ddStyling? {'display': 'block'} : {'display': 'block'}"
[ngClass]='ddStatus' ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
CSS
.ddOpened{
background:lightpink;
animation: myOpenMove 1s ease-in;
}
@keyframes myOpenMove {
0% { visibility:hidden; opacity: 0; }
100% { visibility:visible; opacity: 1; }
}
.ddClosed{
background:lightpink;
animation: myCloseMove 1s ease-in;
transform: translate(0px, 38px);
visibility:hidden;
}
@keyframes myCloseMove {
0% { opacity: 1 !important; visibility: visible; }
100% { height:1px; opacity: 0; visibility:hidden; }
}
在 stackblitz 上工作演示
推荐阅读
- php - PHP 可以确定给定语言环境的给定字符串的“属格大小写”吗?
- spring - Spring SAML 扩展和 Spring Security 5
- jmeter - Jmeter Moodle 测试最大并发使用量
- java - 为什么 Double::compareTo 可以用作 Stream.max(Comparator 比较器)的参数
- django - 从 Django 中的变量列出会话中使用的所有值
- kubernetes - 如何使用 Istio Ingress 隔离内部和外部负载?
- php - 通过带有 jquery 的 AJAX 嵌套 JSON 数据但获得未定义的值
- python - 从电子邮件中提取文本后,空格替换为 =20
- gnuplot - 我正在尝试使用 multiplot 来结合 plot 和 splot 但 x,y 标签似乎被转移了
- c# - C# 中的 Api GetAccessToken 不返回