Question

我正在尝试正确地从顶部和底部打开和设置动画（与从底部到顶部的打开和关闭行为相同），但是无法在有角度的材质中进行。

它应该仅在单击关闭按钮时关闭，并且没有其他动作，以及如何在ts方法中的每次单击中获取选定的筹码值。

任何其他实现目标的方法也都可以使用，例如获得具有底部外观的顶部外观。

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

Answer 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'
    });

请注意：，如果您想控制关闭动画超出堆栈闪电中的范围，则需要进一步处理这一概念。

Stackblitz

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

角材料-动画和位置显示不正确

1 个答案: