How to use the @angular/animations.transition function in @angular/animations

opacity: 0
            })),
            state('active', style({
                opacity: 1
            })),
            transition('inactive => active', animate('750ms ease-in')),
            transition('active => inactive', animate('750ms ease-out'))
        ]),
        trigger(
            'showHideAnimation',
            [
                transition(':enter', [   // :enter is alias to 'void => *'
                    style({opacity: 0}),
                    animate(750, style({opacity: 1}))
                ]),
                transition(':leave', [   // :leave is alias to '* => void'
                    animate(750, style({opacity: 0}))
                ])
            ])
    ],
    providers: [PropertyControlService]
})
export class DynamicFormComponent implements OnInit, AfterViewInit {

    @Input() gadgetTags: any[];//todo - use to control what endpoints are displayed
    @Input() propertyPages: any[];
    @Input() instanceId: number;
    @Output() updatePropertiesEvent: EventEmitter = new EventEmitter(true);
    currentTab = 'run';
    endPoints: EndPoint[];
    state = 'inactive';
    lastActiveTab = {};

/**
 * This is the right sidebar, where attributes of nodes and relationships get displayed.
 */
@Component({
    selector: 'winery-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css'],
    animations: [
        trigger('sidebarAnimationStatus', [
            state('in', style({ transform: 'translateX(0)' })),
            transition('void => *', [
                style({ transform: 'translateX(100%)' }),
                animate('100ms cubic-bezier(0.86, 0, 0.07, 1)')
            ]),
            transition('* => void', [
                animate('200ms cubic-bezier(0.86, 0, 0.07, 1)', style({
                    opacity: 0,
                    transform: 'translateX(100%)'
                }))
            ])
        ])
    ]
})
export class SidebarComponent implements OnInit, OnDestroy {
    // ngRedux sidebarSubscription
    sidebarSubscription;
    sidebarState: any;
    sidebarAnimationStatus: string;
    maxInputEnabled = true;
    propertyDefinitionType: string;

<div class="oc-collapsible-body">
            
        </div>
        `,
    styleUrls: ['./oc-collapsible.scss'],
    encapsulation: ViewEncapsulation.None,
    animations: [
        trigger('ocToggle', [
            state('0', style({
                height: 0
            })),
            state('1', style({
                height: '*'
            })),
            transition('0 =&gt; 1', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
            transition('1 =&gt; 0', animate('225ms cubic-bezier(0.4,0.0,0.2,1)'))
        ])
    ]
})
export class OCCollapsibleComponent implements AfterContentInit, OnChanges {
    @ContentChild(OCCollapsibleHeaderComponent) public header: OCCollapsibleHeaderComponent;
    @Input() showToggle: boolean = true;
    @Input() showDivider: boolean = true;
    @HostBinding('class.active')
    @Input() active: boolean = false;

    ngAfterContentInit(): void {
        this.header.onClick.subscribe(() =&gt; this.toggle());
        this.updateToggle(this.showToggle);
    }

import { I18nPluralPipe } from '@angular/common';

@Component({
    templateUrl: './identity.html',
    styleUrls: [
        
    ],
    animations: [
        trigger('overlayState', [
            state('hidden', style({
                opacity: 0
            })),
            state('visible', style({
                opacity: 1
            })),
            transition('visible => hidden', animate('400ms ease-in')),
            transition('hidden => visible', animate('400ms ease-out'))
        ]),
    
        trigger('notificationTopbar', [
            state('hidden', style({
            height: '0',
            opacity: 0
            })),
            state('visible', style({
            height: '*',
            opacity: 1
            })),
            transition('visible => hidden', animate('400ms ease-in')),
            transition('hidden => visible', animate('400ms ease-out'))
        ])
    ]

@Component({
    selector: 'nm-slide',
    templateUrl: './slide.component.html',
    styleUrls: ['./slide.component.scss'],
    animations: [
        trigger('animate', [
            state('show', style({
                opacity: 1,
                display: 'block'
            })),
            state('hide', style({
                opacity: 0,
                display: 'none'
            })),
            transition('hide => show', animate('1000ms ease')),
            transition('show => hide', animate('800ms ease-out'))
        ])
    ]
})
export class NmSlideComponent implements OnInit, OnDestroy {

    /**
     * Slide 在 Carousel 中的索引
     */
    @Input() public index: number;

    /**
     * Slide 方向
     */
    @Input() public direction: Direction;

animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
  ]),
  state('top', style({
    opacity: 1,
    transform: 'scaleY(1)',
    transformOrigin: '0% 100%'
  })),
  transition('void => top', [
    style({
      opacity: 0,
      transform: 'scaleY(0)',
      transformOrigin: '0% 100%'
    }),
    animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
  ]),
  transition('* => void', [
    animate('250ms 100ms linear', style({opacity: 0}))
  ])
]);

@Component({
  selector: 'ui-dialog',
  templateUrl: './diolog.component.html',
  animations: [
    trigger('dialogAnimation', [
      transition(':enter', animate('.1s', keyframes([
        style({
          transform: 'translateY(-100%)',
          offset: 0
        }),
        style({
          transform: 'translateY(0)',
          offset: 1
        })
      ]))),
      transition(':leave', animate(100, keyframes([
        style({
          transform: 'translateY(0)',
          offset: 0
        }),
        style({
          transform: 'translateY(-100%)',
          offset: 1
        })
      ])))
    ])
  ]
})

export class DialogComponent implements OnInit, OnDestroy {
  show: boolean = false;

export function fadeInDownBigAnimation(options?: IFadeInDownBigAnimationOptions): AnimationTriggerMetadata {
  return trigger((options && options.anchor) || 'fadeInDownBig', [
    transition(
      '0 => 1',
      [
        ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
        group([
          useAnimation(fadeInDownBig),
          ...(!options || !options.animateChildren || options.animateChildren === 'together'
            ? [query('@*', animateChild(), { optional: true })]
            : [])
        ]),
        ...(options && options.animateChildren === 'after' ? [query('@*', animateChild(), { optional: true })] : [])
      ],
      {
        params: {
          delay: (options && options.delay) || 0,
          duration: (options && options.duration) || DEFAULT_DURATION,
          translate: (options && options.translate) || '2000px'

),
                ],
                {
                    optional: true,
                },
            ),
            query(
                ':leave',
                [style({ opacity: 1, width: '100%' }), animate('.35s ease-out', style({ opacity: 0 }))],
                {
                    optional: true,
                },
            ),
        ]),
    ]),
    transition('DetailPage => HomePage', [
        query(':enter, :leave', style({ position: 'absolute', left: 0, right: 0 }), {
            optional: true,
        }),
        group([
            query(
                ':enter',
                [
                    style({
                        opacity: 0,
                    }),
                    animate(
                        '.35s ease-out',
                        style({
                            opacity: 1,
                        }),
                    ),

style({
                                transform: 'translateX(0%)',
                            }))
                    ], {optional: true}),
                    query('[previousTable]', [
                        style({
                            transform: 'translateX(0%)',
                        }),
                        animate('.35s ease-in-out',
                            style({
                                transform: 'translateX(-100%)',
                            }))
                    ], {optional: true})
                ])
            ]),
            transition('* => left', [
                group([
                    query('[currentTable]', [
                        style({
                            transform: 'translateX(-100%)',
                            position: 'absolute'
                        }),
                        animate('.35s ease-in-out',
                            style({
                                transform: 'translateX(0%)',
                            }))
                    ], {optional: true}),
                    query('[previousTable]', [
                        style({
                            transform: 'translateX(0%)',
                        }),
                        animate('.35s ease-in-out',