Color-transition animation

colorTransition is an Angular animation trigger that interpolates between two CSS colors passed in params. The trigger's value selects which of the named params (color1 / color2) the element animates toward; switching the value re-runs the transition.

Basic usage

State

  
    
      
        <bs-checkbox [type]="'checkbox'" [(ngModel)]="state">Toggle</bs-checkbox>
        
    
      
        
        
    
      
        <div [@colorTransition]="{ value: currentColor(), params: { color1: '#F00', color2: '#00F' }}"
        
    
      
             class="swatch d-inline-block"></div>

  
    
      
        import { Component, computed, model } from '@angular/core';
        
    
      
        import { FormsModule } from '@angular/forms';
        
    
      
        import { ColorTransitionAnimation } from '@mintplayer/ng-animations';
        
    
      
        import { BsCheckboxComponent } from '@mintplayer/ng-bootstrap/checkbox';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-color-transition-demo',
        
    
      
          templateUrl: './my-color-transition-demo.component.html',
        
    
      
          animations: [ColorTransitionAnimation],
        
    
      
          imports: [FormsModule, BsCheckboxComponent],
        
    
      
        })
        
    
      
        export class MyColorTransitionDemoComponent {
        
    
      
          state = model(false);
        
    
      
          currentColor = computed(() => this.state() ? 'color1' : 'color2');
        
    
      
        }