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

Question

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

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

我该怎么做？

Answer 1

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

使用 angular 动画

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 -> 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，您会看到它是如何 work.I 使用另一个 div 来触发一个名为 changeState 的函数来更改属性为其设置动画。

仅使用 css

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

使用transition（来自css）和ngClass你可以达到同样的效果。

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

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

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

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

Show or Hide div to the left using Angular Animation

angular

dialog

angular-animations