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

Question

我正在展示高度和宽度为 600 像素的垫子对话框。

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

我该怎么做？

Answer 1

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

使用 Angular 动画

堆栈 Blitz :https://stackblitz.com/edit/angular-azjfgh

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

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

trigger -> the name of the trigger we want to registrate and use in the html

state -> two state that we will use in order to change our div.

style -> the css property we want to change based on our logic.

transition -> a simple timer that will animate the grow of the div.

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

只使用 css

堆栈 Blitz :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;
}

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