垫卡高度的过渡

Question

使用 Angular Material（版本 10），我想制作一个 mat-card 的动画，以便它在页面加载时垂直扩展到全高。

我已经尝试了一些仅使用悬停事件的测试（如果可行，我将研究如何在页面加载时应用过渡 - 这是另一回事），具有以下 CSS:

.test-anim {
  height: 0!important;
  transition: height 2s ease !important;
  &:hover {
    height: 100% !important;
  }
}

<mat-card class="test-anim">
  [some content...]
</mat-card>

不幸的是，这不起作用：

当我悬停在mat-card时，卡片直接从0消耗到100%，但完全没有过渡。顺便说一句，当我尝试从 Chrome 开发人员工具手动设置高度时，我意识到任何中间百分比（例如 50%）似乎都被视为 100%。只有 0% 与 100% 有所不同。（但是，动画使用不透明度而不是高度，并将 100% 替换为 1）。
我不能在过渡中使用 px 值，因为垫卡的实际高度可能会因显示的数据而异。
即使我会使用 px 值进行过渡，它仍然无法完全工作：当我从 [=42 手动设置以像素为单位的高度（例如'30px'）时=] Developer Tools，卡片本身的大小实际上是正确的，但它的内容显示在卡片之外（我本以为 mat-card 内容会被 mat-card 本身剪裁）。

你能帮帮我吗？非常感谢！

Answer 1

我认为您可以更轻松地利用 Angular 的 animation API。

您需要做的是：

将 mat-card 的 height 设置为 100%（或 flex:1，或根据您的 parent / 要求设置其他值）。
在您的组件上定义动画
将动画应用于您想要的 HTML 元素（例如 mat-card）
触发动画。

这是一个 working stackblitz 我从 mat-card 文档中分叉出来并添加了动画。

对其进行扩展：

添加class元素：

<mat-card class="example-card">

定义 class:

 .example-card {
   height: 100%;
 }

定义动画：

@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
  animations: [
    trigger('bodyExpansion', [
      state('collapsed, void', style({ height: '0px', visibility: 'hidden', overflow: 'hidden' })),
      state('expanded', style({ height: '*', visibility: 'visible', overflow: '*' })),
      transition(
        'expanded <=> collapsed, void => collapsed, void => expanded',
        animate('1000ms cubic-bezier(0.4, 0.0, 0.2, 1)')
      ),
    ]),
  ],
})

将动画应用于 html 元素：

<mat-card class="example-card" [@bodyExpansion]="state">

定义状态变量并在“页面加载后”更新它（我在内容初始化后使用，可能对您有其他意义）。

  state: 'expanded' | 'collapsed' = 'collapsed';

  ngAfterContentInit(): void {
    this.state = 'expanded';
  }

基本上就是这样。完整阅读我链接的整个文档后，您应该理解它。

垫卡高度的过渡

Transition on mat-card height

css

animation

angular-material

css-transitions

mat-card