מדריך אנימציות באנגולר

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'


imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],

<p @fade>
    class-comp works!
</p>

import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: '.app-class-comp',
  templateUrl: './class-comp.component.html',
  styleUrls: ['./class-comp.component.scss'],
  animations: [
    trigger('fade', [
      transition('void => *', [
        style({                       //משפיע מידית
          backgroundColor: 'red',
          opacity: 0
        }),
        animate(2000, style({        // משפיע לאורך זמן ובמידה שרוצים לעדכן באופן ספציפי התנהגות
          backgroundColor: 'white',
          opacity: 1
        }))
        // animate(2000)            //במידה ורוצים מעבר מהמצב המידי שנקבע למצב ברירת מחדל שנקבע על ידי ה-CSS
      ]),
      transition('* => void', [     // כאשר הרכיב יוצא מה-DOM
        animate(2000, style({
          opacity: 0
        }))
      ])
    ])
  ]
})

@Component({
  selector: '.app-class-comp',
  templateUrl: './class-comp.component.html',
  styleUrls: ['./class-comp.component.scss'],
  animations: [
    trigger('fade', [
      state('void', style({          //מגדיר את העיצוב במצב מסויים וכך אין צורך באופן מפורש להגדירו מחדש
        opacity: 0
      })),
      transition('void => *', [      
        animate(2000)               //במידה ורוצים מעבר מהמצב המידי שנקבע למצב ברירת מחדל שנקבע על ידי ה-CSS
      ]),
      transition('* => void', [     // כאשר הרכיב יוצא מה-DOM
        animate(2000)
      ])
    ])
  ]
})

@Component({
  selector: '.app-class-comp',
  templateUrl: './class-comp.component.html',
  styleUrls: ['./class-comp.component.scss'],
  animations: [
    trigger('fade', [
      state('void', style({               //מגדיר את העיצוב במצב מסויים וכך אין צורך באופן מפורש להגדירו מחדש
        opacity: 0
      })),
      transition('void => * , * => void', [      
        animate(2000)                  //במצב הזה מוגדרים אותם הגדרות כאשר הרכיב נכנס או יוצא
      ]),
    
    ])
  ]
})

@Component({
  selector: '.app-class-comp',
  templateUrl: './class-comp.component.html',
  styleUrls: ['./class-comp.component.scss'],
  animations: [
    trigger('fade', [
      state('void', style({               //מגדיר את העיצוב במצב מסויים וכך אין צורך באופן מפורש להגדירו מחדש
        opacity: 0
      })),
      transition('void <=> *', [
        animate(2000)                  //במצב הזה מוגדרים אותם הגדרות כאשר הרכיב נכנס או יוצא
      ]),

    ])
  ]
})

@Component({
  selector: '.app-class-comp',
  templateUrl: './class-comp.component.html',
  styleUrls: ['./class-comp.component.scss'],
  animations: [
    trigger('fade', [
      state('void', style({               //מגדיר את העיצוב במצב מסויים וכך אין צורך באופן מפורש להגדירו מחדש
        opacity: 0
      })),
      transition(':enter , :leave', [      // 'void => * , * => void'
        animate(2000)                  //במצב הזה מוגדרים אותם הגדרות כאשר הרכיב נכנס או יוצא
      ]),
    
    ])
  ]
})

import { animate, state, style, transition, trigger } from "@angular/animations";

export let fade = trigger('fade', [
    state('void', style({
        opacity: 0
    })),
    transition(':enter , :leave', [
        animate(2000)
    ]),

]);

import { Component, OnInit } from '@angular/core';
import { fade } from '../animations/fade.animations';

@Component({
  selector: '.app-class-comp',
  templateUrl: './class-comp.component.html',
  styleUrls: ['./class-comp.component.scss'],
  animations: [
    fade
  ]
})
export class ClassCompComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}