How to add device specific animation transition on an element when show/hide using *ngIf

Question

I am trying to achieve two variation of animation transition depends on screen size in an angular component while show and hide,

• screen size: medium screen and below - swipe transition from bottom
• screen size: above medium screen - swipe transition from right

I need animation when loading and hiding the div with class login-content depends *ngIf value

   <div class="row g-0">
        <div class="d-none d-lg-block col-lg-7">
            <!-- Side panel for graphic content and description login screen hidden in screens below 998 pixels -->
            <div class="lg-graphic-content">

                <!-- Graphic content for large screens above 998 pixels -->
                large content
                <button class="btn" (click)="toggleLoginContent()">Toggle</button>
            </div>
        </div>
        <div class="col-12 col-sm-12 col-lg-5">
            <div class="md-graphic-content p-4">
                <!-- Graphic content for medium/small screens below 998 pixels -->
                medium content
                <button class="btn" (click)="toggleLoginContent()"> show/hide</button>
            </div>
            <div *ngIf="isOpen" class="login-content p-4">
              <!-- This div need to animate device specific while showing and hiding  depends on "isOpen" variable -->
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra enim justo, fermentum ultrices augue porta dignissim. Ut faucibus faucibus lorem nec commodo. 
            </div>
        </div>
   </div>

Case-1

I used normal media query css animation to load the div

    .login-content{
        
        animation: slideInFromRight 1s;
        border: 1px solid rgba(30, 51, 53, 0.2);
        box-shadow: 
            0 -5px 8px rgb(0 0 0 / 25%), 
            -4px 4px 4px rgba(15, 20, 28, 0.1);
        border-radius: 2px;
        background-color: #ffffff;
    }
    @media (max-width: 992px){
        .md-graphic-content {
            display: block !important;
            background-color: #e1f5fe;
            // background-color: #02fefa;
        }
        .login-content{
            position: fixed;
            bottom: 0;
            animation: slideInFromBottom 1s;
            border-top-left-radius: 18px;
            border-top-right-radius: 18px;
        }
    }
    @media (min-width: 992px){
        .md-graphic-content {
            display: none !important;
        }
        .login-content{
            min-height: 100vh;
        }
    } 

This will work in load case and device specific. But not working when we hide using *ngIf

Case-2

When I use Angular animation in meta-data as below

  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        animate('0.5s', style({ animation: 'slideOutToBottom' })) // Using CSS keyframes directly
      ]),
      transition(':leave', [
        animate('0.5s ease-in-out', style({ animation: 'slideInFromBottom' }))
      ])
      
    ])
  ] 

In this I can see animation while loading and hiding, But I am unable to achieve different animation for below medium screen and above medium screen

1. Is it possible to achieve device responsive transition using Angular Animation ?
2. Is it possible to add animation using css styling(without angular Animation) for div when show/hide on *ngIf ?
3. Is there an alternative to achieve this in Angular ?

I am looking for a solution which can do both

• Animation while loading and hiding using *ngIf
• Animation need to be device specific

I really appreciate your suggestions.