Angular 🇺🇦 - practical notes

📄 Customizable Angular animations

#angular #animations #ui_element

...A component with customizable animations might look like this...

// collapse.ts

const closedStyle = style({ 
  height: 0 
});

const openStyle = style({ 
  height: '*' 
});

const timings = '{{duration}}ms linear';

const defOptions: AnimationOptions = { 
  params: { 
   duration: 300 
  } 
};

export const collapse = trigger('collapse', [
  transition(
    ':enter',
    animation([closedStyle, animate(animateTimings, openStyle)]),
    defaultOptions
  ),
  transition(
    ':leave',
    animation([openStyle, animate(animateTimings, closedStyle)]),
    defaultOptions
  ),
]);


// bonus.component.ts

@Component({
  animations: [collapse],
  host: {
    '[@collapse]': 'animationOptions',
  },
})
export class BonusComponent implements OnInit {
  @Input() public duration = 300;
  public options!: IAnimationOptions<string>

  public ngOnInit(): void {
    this.options = {
      value: '_',
      params: { 
         duration: this.duration 
      },
    };
  }
}

✅ Article link

👍3❤1🔥1

461 viewsedited 07:00

Angular 🇺🇦 - practical notes

This media is not supported in your browser

VIEW IN TELEGRAM

❤️

🤓 Angular Animations Functions

#angular #animations #ui_element

Example explanation:

Triggers (trigger):
parentTrigger: Defines animations for the parent element.
childTrigger: Defines animations for the child elements.

States (state):
parentTrigger: Has the states start and end.
childTrigger: Has the states visible and hidden.

Styles (style):
Defines final and intermediate styles for different states and transitions.

Transitions (transition):
Defines how the animation should occur between states.

Animate (animate):
Defines the duration and timing function of the animations.

Keyframes (keyframes):|
Used in the transition from visible to hidden in the child elements to create detailed intermediate animations.

Group (group):
Used in the transition from start to end in parentTrigger to animate multiple properties in parallel.

Sequence (sequence):
Used in the transition from end to start in parentTrigger to animate multiple properties in sequence.

Query (query):
Used in the transition from hidden to visible in childTrigger to select and animate child elements.

Stagger (stagger):
Used with query to apply a delay between the animations of the child elements, creating a cascading effect.