0

使用 Angular Material（版本 10），我想为 a 设置动画，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）。

请你帮助我好吗？非常感谢！

4

1 回答 1

1

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

你需要做的是：

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

这是我从 mat-card 文档中分叉出来的一个工作 stackblitz，我在其中添加了动画。

扩展它：

向元素添加类：

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

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

于 2022-02-02T13:11:05.100 回答