Is there any way to apply animation while moving from display block to display none and vice versa

On clicking a button am adding and removing class for display none and display block
and i would like put some animation effects while these happen. Can anyone tell me a solution

This is my scss file

page-step-one {

    .hiddenClass {
       
        display:none;

    }

    .activeClass {
        
        display: block;
    }

}

and this is my function which works on of the button

 displaySteps(step) {
    console.log('in display steps');
    
    if(step == 'type')
    {
      document.getElementById('type').classList.remove('activeClass');
      document.getElementById('type').classList.add('hiddenClass');
      
      document.getElementById('garment').classList.remove('hiddenClass');
      document.getElementById('garment').classList.add('activeClass');
    }
    
  }

And if there is any better way for adding and removing classes on button click. Please do suggest that too

Definitely. The NgClass directive.

what about adding some animations while adding these classes