Fade in/out animation

fadeInOut is an Angular animation trigger that fades an element's opacity in on enter and out on leave. Pair it with an @if block so the element is added and removed from the DOM — the trigger requires the enter/leave lifecycle to animate.

Basic usage

  
    
      
        <button (click)="fadeInOutState.set(!fadeInOutState())" [color]="colors.primary">
        
    
      
          Toggle
        
    
      
        </button>
        
    
      
        
        
    
      
        @if (fadeInOutState()) {
        
    
      
          <div [@fadeInOut] class="overflow-hidden">
        
    
      
            <p>Content that fades in and out as the signal toggles.</p>
        
    
      
          </div>
        
    
      
        }

  
    
      
        import { Component, signal } from '@angular/core';
        
    
      
        import { FadeInOutAnimation } from '@mintplayer/ng-animations';
        
    
      
        import { Color } from '@mintplayer/ng-bootstrap';
        
    
      
        import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-fade-in-out-demo',
        
    
      
          templateUrl: './my-fade-in-out-demo.component.html',
        
    
      
          animations: [FadeInOutAnimation],
        
    
      
          imports: [BsButtonTypeDirective],
        
    
      
        })
        
    
      
        export class MyFadeInOutDemoComponent {
        
    
      
          protected readonly colors = Color;
        
    
      
          protected fadeInOutState = signal(false);
        
    
      
        }