角度材质-动画和位置显示不正确 [英] Angular-material - animation and position is not displaying correct

问题描述

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

只能在单击关闭"按钮时关闭，并且没有其他动作，以及如何在ts方法中的每次单击中获取选定的筹码值.

I am trying trying to open and animate from top and close as well correctly (same behaviour as it have from bottom for opening and closing), but unable to do so in angular-material.

It should only close on the click of close button and with nothing else actions and how to Get the selected chip value on every click in ts method.

任何其他实现目标的方法，也就是获得像我们拥有底页的顶页一样，也受到欢迎.

Any other way to achieve the goal ie to get a top-sheet like we have bottom-sheet is also welcomed.

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

推荐答案

不幸的是，由于此功能被设计为bottom-sheet，因此无法执行此操作，因此您将需要覆盖一些CSS以为此...您可以执行以下操作来实现此目的.

Unfortunately there is not functionality to do this as it was designed to be a bottom-sheet... so you will need to be willing to override some css to do this... You can do the following to achieve this.

在配置中设置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并使用子选择器，也可以传递自定义类.

You can also pass a custom class if you do not want to override css globally and use child selectors.

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

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

Please Note: you will need to work on this concept further if you want to control the close animation beyond what it is in the stackblitz.

Stackblitz

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

这篇关于角度材质-动画和位置显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！