Change style class with Angular animation or similar

Question

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 class="grid">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">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.

Answer 1

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