Show or Hide div to the left using Angular Animation

Question

I am showing mat-dialog with 600px height and width.

I have a button in mat-dialog. When I click on button, I want to show the left sliding div from the left side of mat-dialog without effecting mat-dialog.

How can I do this?

Answer 1

You can do this in two ways.

Using angular Animations

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

Angular provides a sets of methods to do some cool stuff. In this example I've wrote that:

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.

If you open the stackblitz you will see how does it work.I used another div to trigger a function called changeState to change the property to animate it.

Using just css

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

Using transition (native from css) and ngClass you can achieve the same thing.

Since it's just basic code I'm just putting here the css class:

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

If you need more help feel free to comment this answer.