时间戳

首页 > 解决方案 > 使用 Angular Animation 在左侧显示或隐藏 div

angular - 使用 Angular Animation 在左侧显示或隐藏 div

问题描述

我正在显示高度和宽度为 600 像素的 mat-dialog。

我在 mat-dialog 中有一个按钮。当我点击按钮时，我想从 mat-dialog 的左侧显示左侧滑动 div 而不会影响 mat-dialog。

我怎样才能做到这一点？

标签： angulardialogangular-animations

解决方案

您可以通过两种方式做到这一点。

使用角度动画

Stackblitz：https ://stackblitz.com/edit/angular-azjfgh

Angular 提供了一组方法来做一些很酷的事情。在这个例子中，我写道：

animations: [
        trigger('widthGrow', [
            state('closed', style({
                width: 0,
            })),
            state('open', style({
                width: 400
            })),
            transition('* => *', animate(150))
        ]),
    ]

trigger -> 我们要在 html 中注册和使用的触发器的名称

state -> 我们将用于更改 div 的两个状态。

style -> 我们想要根据我们的逻辑更改的 css 属性。

过渡-> 一个简单的计时器，它将动画 div 的增长。

如果您打开 stackblitz，您将看到它是如何工作的。我使用另一个 div 来触发一个名为changeState的函数来更改属性以对其进行动画处理。

仅使用 css

Stackblitz：https ://stackblitz.com/edit/angular-lpjqnd

使用transition（来自 css 的本机），ngClass您可以实现相同的目标。

因为它只是基本代码，所以我只是把 css 类放在这里：

.left-stuff {
  height: 50px;
  border: 1px solid black;
  transition: all 0.2s ease-in-out;
  background-color: red;
}

如果您需要更多帮助，请随时评论此答案。

推荐阅读