mat-card 高度上的过渡

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>

不幸的是，这不起作用：

1. 当我将鼠标悬停在mat-card 上时，卡片直接从 0 消耗到 100%，但完全没有过渡。顺便说一句，当我尝试从 Chrome 开发人员工具手动设置高度时，我意识到任何中间百分比（例如 50%）似乎都被视为 100%。只有 0% 与 100% 有区别。 （但是，动画使用不透明度而不是高度，并将 100% 替换为 1）。

2. 我不能在过渡中使用px 值，因为垫卡的实际高度可能会因显示的数据而异。

3. 即使我会使用px 值进行转换，它仍然不能完全工作：当我从 Chrome 开发人员工具手动设置高度（例如“30px”）时，卡片本身的大小实际上是正确的，但是它的内容显示在卡片之外（我本来希望mat-card 本身对mat-card 内容进行某种剪辑）。

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

Answer 1

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

你需要做的是：

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

这是一个working stackblitz，我从 mat-card 文档中派生出来，并在其中添加了动画。

扩展它：

给元素添加类：

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

定义类：

 .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';
  }

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