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

Question

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

我在垫子对话框中有一个按钮。当我单击按钮时，我想从 mat-dialog 的左侧显示左滑动 div，而不影响 mat-dialog。

我怎样才能做到这一点？

Answer 1

您可以通过两种方式执行此操作。

使用角度动画

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 中注册和使用的触发器的名称

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

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

过渡-> 一个简单的计时器，可以为 div 的生长提供动画效果。

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

仅使用 CSS

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

使用transition(native from css)ngClass你可以达到同样的效果。

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

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

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