使用Angular动画向左显示或隐藏div

Question

我正在展示一个高度和宽度均为600像素的mat-dialog。

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

我该如何实现这个效果？

- Chatra

---

你能创建一个StackBlitz吗？ - yazantahhan

你在StackBlitz中想要什么？ - Chatra

Answer 1

你可以通过两种方式实现此操作。 使用Angular 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))
        ]),
    ]

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

状态 -> 用于改变我们的div的两种状态。

样式 -> 基于逻辑改变的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;
}

如果您需要更多帮助，请随意在评论中提出。

- Jacopo Sciampi

---

我试了一下你的第一个StackBlitz，并改变了宽度。不知何故，它的行为很奇怪。试试将宽度设为50，并在动画中将150替换为50，看看效果如何。 - Chatra

我尝试了以下设置：width = 50;changeState(): void { (this.width === 50) ? this.width = 150 : this.width = 50; }，它正常工作。我有什么遗漏吗？ - Jacopo Sciampi