Slide up/down animation

Two complementary triggers ship together: slideUpDown accepts a boolean and animates an always-rendered element's height between zero and its natural size, while slideUpDownNgif is wired to the enter/leave lifecycle for use inside @if blocks. Wrap the target in overflow-hidden so the collapsing height clips its content.

Basic usage

  
    
      
        <button (click)="state.set(!state())" [color]="colors.primary">Toggle</button>
        
    
      
        
        
    
      
        <div [@slideUpDown]="state()" class="overflow-hidden">
        
    
      
          <p>This block slides down on true and up on false.</p>
        
    
      
        </div>

  
    
      
        import { Component, signal } from '@angular/core';
        
    
      
        import { SlideUpDownAnimation } from '@mintplayer/ng-animations';
        
    
      
        import { Color } from '@mintplayer/ng-bootstrap';
        
    
      
        import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-slide-up-down-demo',
        
    
      
          templateUrl: './my-slide-up-down-demo.component.html',
        
    
      
          animations: [SlideUpDownAnimation],
        
    
      
          imports: [BsButtonTypeDirective],
        
    
      
        })
        
    
      
        export class MySlideUpDownDemoComponent {
        
    
      
          protected readonly colors = Color;
        
    
      
          protected state = signal(false);
        
    
      
        }