Change style class with Angular animation or similar-CodePudding

I'm having difficulty trying to change the style of a class with a display: grid to shrink, so to speak, over a short period of time, a few hundred milliseconds. Currently I'm using interval functions that pass in a string to set the style to mimic an animation but it doesn't work as well and is ugly. Is it possible with Angular animations to change css class styles?

<div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 2</div>
</div>

<style>
  /*scss file*/
  .grid {
     display: grid;
     grid-gap: 5px;
     grid-template-columns: repeat(3, 33.3%) 1fr;
   }
 </style>

Ideally I would like to you something like this to lower the repeat values from 3 to 1, and change the the size but in a smooth transition for when a box is selected also hiding the other boxes. I have attempted to use the query selector in the animations decorator though with no luck. Is there any suggestion to how to do this? Any suggestion is welcome.

CodePudding user response：

Css animations & binding to a class

Using grid is cool but there's not a nice way to achieve what you want with it

Try this on for size

https://stackblitz.com/edit/angular-jeamzb?file=src/app/app.component.ts

It's not your exact solution but I whipped it up to show you how you could do something like this