Angular-material - 动画和位置显示不正确答案

【问题标题】：Angular-material - animation and position is not displaying correctAngular-material - 动画和位置显示不正确
【发布时间】：2019-11-13 20:53:18
【问题描述】：

我正在尝试从顶部打开和设置动画并正确关闭（与从底部打开和关闭的行为相同），但无法在角度材料中这样做。

它应该只在单击关闭按钮时关闭，没有其他操作以及如何在 ts 方法中每次点击时获取所选筹码值。

也欢迎任何其他实现目标的方法，即获得像我们有底页一样的顶页。

https://stackblitz.com/edit/angular-fkfckf-twerla?file=app%2Fbottom-sheet-overview-example-sheet.html

【问题讨论】：

标签： angular html angular-material angular7 bottom-sheet

【解决方案1】：

不幸的是，没有功能可以做到这一点，因为它被设计为bottom-sheet...所以你需要愿意重写一些 css 来做到这一点......你可以执行以下操作来实现这一点。

在配置中设置disableClose

this.bottomSheet.open(BottomSheetOverviewExampleSheet,{
      disableClose: true
    });

覆盖 CSS

@Keyframes slideDown{
 0%{ opacity: 0 }
 100%{ 
  opacity: 1;
  transform: translateY(0%);
 }
}

::ng-deep .cdk-overlay-pane{
  top: 0 !important;
  position: absolute !important;
  transform: translateY(-250%);
  animation: slideDown 0.5s forwards 0s ease-in;
}

::ng-deep .cdk-overlay-container > * {
 animation: none;
}

如果您不想全局覆盖 css 并使用子选择器，也可以传递自定义类。

this.bottomSheet.open(BottomSheetOverviewExampleSheet,{
      disableClose: true,
      panelClass: 'some-custom-class-here'
    });

请注意：如果您想控制关闭动画超出堆栈闪电战中的效果，则需要进一步研究此概念。

堆栈闪电战

https://stackblitz.com/edit/angular-fkfckf-sslp2l?embed=1&file=app/bottom-sheet-overview-example.ts

【讨论】：

能否请您帮我关闭动画，因为它的行为不正确，因为它应该有反向动画以及我应该如何在点击时获得筹码的价值。