@angular/animations#transition TypeScript Examples

The following examples show how to use @angular/animations#transition. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: splash.component.ts From bitcoin-s-ts with MIT License

6 votes

@Component({
  selector: 'splash',
  templateUrl: './splash.component.html',
  animations: [
  // the fade-in/fade-out animation.
  trigger('fadeOut', [
    transition(':leave', [
      query(':leave', animateChild(), {optional: true}),
      animate(300, style({opacity: 0}))
    ]),
  ]),
],
  styleUrls: ['./splash.component.scss']
})
export class SplashComponent implements OnInit {

  showSplash = false

  constructor() { }

  ngOnInit(): void {
    // Force reset splash key
    // localStorage.removeItem(SPLASH_KEY)

    const show = localStorage.getItem(SPLASH_KEY) === null
    this.showSplash = show
  }

  dontShowSplashAgainClick() {
    console.debug('dontShowSplashAgainClick()')
    localStorage.setItem(SPLASH_KEY, '1')
  }

  onClick() {
    this.showSplash = !this.showSplash
  }

}

Example #2

Source File: app-menu.component.ts From scion-microfrontend-platform with Eclipse Public License 2.0

6 votes

@Component({
  selector: 'devtools-app-menu',
  templateUrl: './app-menu.component.html',
  styleUrls: ['./app-menu.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('openCloseMenu', [
      transition(':enter', [
        style({
          width: '0',
        }),
        animate(100, style({width: '*'})),
      ]),
    ]),
  ],
})
export class AppMenuComponent {

  @Output()
  public close = new EventEmitter<void>();  // eslint-disable-line @angular-eslint/no-output-native

  @HostListener('document:keydown.escape')
  public onBackdropClick(): void {
    this.close.emit();
  }

  public onMenuItemClick(): void {
    this.close.emit();
  }
}

Example #3

Source File: fade.animation.ts From ng-ant-admin with MIT License

6 votes

fadeRouteAnimation = trigger('fadeRouteAnimation', [
  transition('*<=>*', [

    // css styles at start of transition
    style({opacity: 0, 'will-change': 'transform'}),

    // animation and styles at end of transition
    animate('0.3s ease-in', style({opacity: 1, 'will-change': 'transform'}))
  ]),
])

Example #4

Source File: animations.ts From StraxUI with MIT License

6 votes

public static collapseExpand = [
    trigger('collapseExpand', [
      state('collapsed', style({
        opacity: 0,
        height: 0,
        overflow: 'hidden'
      })),
      state('expanded', style({
        opacity: 1,
        height: '*',
        overflow: 'hidden'
      })),
      transition('* => expanded', animate('200ms ease-out')),
      transition('expanded => collapsed', animate('150ms ease-in'))
    ])
  ];

Example #5

Source File: expandable.component.ts From svg-path-editor with Apache License 2.0

6 votes

@Component({
  selector: 'app-expandable',
  templateUrl: './expandable.component.html',
  styleUrls: ['./expandable.component.scss'],
  animations: [
    trigger('openClose', [
      state('*', style({height: '*'})),
      transition(':enter', [style({height: '0'}), animate('100ms ease')]),
      transition(':leave', [animate('100ms ease', style({height: '0'}))]),
    ])
  ]
})
export class ExpandableComponent {
  @Input() opened: boolean = true;
  @Input() panelTitle: string = '';
  @Input() panelInfo: string = '';

  constructor() { }

  toggle() {
    this.opened = !this.opened;
  }

}

Example #6

Source File: success-toast.component.ts From angular-material-admin with MIT License

6 votes

@Component({
  selector: 'app-success-toast',
  templateUrl: './success-toast.component.html',
  styleUrls: ['./success-toast.component.scss'],
  animations: [
    trigger('flyInOut', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      state('removed', style({ opacity: 0 })),
      transition(
        'inactive => active',
        animate('{{ easeTime }}ms {{ easing }}')
      ),
      transition(
        'active => removed',
        animate('{{ easeTime }}ms {{ easing }}')
      )
    ])
  ],
  preserveWhitespaces: false
})
export class SuccessToastComponent extends Toast {
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
  }
}

Example #7

Source File: message-animations.ts From alauda-ui with MIT License

6 votes

MessageAnimations: {
  readonly inOut: AnimationTriggerMetadata;
} = {
  inOut: trigger('inOut', [
    state(
      'flyRight, flyLeft',
      style({ opacity: 1, transform: 'translateX(0)' }),
    ),
    state('slideDown', style({ opacity: 1, transform: 'translateY(0)' })),
    transition('* => slideDown', [
      style({ opacity: 0, transform: 'translateY(-50%)' }),
      animate('100ms ease-in-out'),
    ]),
    state('slideUp', style({ opacity: 0, 'margin-top': '-50%' })),
    transition('* => slideUp', [
      style({ opacity: 1, 'margin-top': '0' }),
      animate('100ms 200ms ease-in-out'),
    ]),

    state('flyLeft', style({ opacity: 1, transform: 'translateX(0)' })),
    transition('* => flyLeft', [
      style({ opacity: 0, transform: 'translateX(5%)' }),
      animate('100ms ease-in-out'),
    ]),
    state('flyUp', style({ opacity: 0, 'margin-top': '-30%' })),
    transition('* => flyUp', [
      style({ opacity: 1, 'margin-top': '0' }),
      animate('100ms 150ms ease-in-out'),
    ]),
    state('void', style({ opacity: 0 })),
    state('true', style({ opacity: 1 })),
    state('false', style({ opacity: 0 })),
    transition('* => true', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
    transition('* => void', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
  ]),
}

Example #8

Source File: info-toastr.component.ts From angular-material-admin with MIT License

6 votes

@Component({
  selector: 'app-info-toastr',
  templateUrl: './info-toastr.component.html',
  styleUrls: ['./info-toastr.component.scss'],
  animations: [
    trigger('flyInOut', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      state('removed', style({ opacity: 0 })),
      transition(
        'inactive => active',
        animate('{{ easeTime }}ms {{ easing }}')
      ),
      transition(
        'active => removed',
        animate('{{ easeTime }}ms {{ easing }}')
      )
    ])
  ],
  preserveWhitespaces: false
})
export class InfoToastrComponent extends Toast {
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
  }
}

Example #9

Source File: fade.animation.ts From ng-ant-admin with MIT License

6 votes

fadeAnimation = trigger('fadeAnimation', [
  transition(':enter', [
    style({
      transform: 'scale3d(1.075, 1.075, 1)',
      opacity: 0,
    }),
    animate('250ms ease-out', style({
      transform: 'scale3d(1, 1, 1)',
      opacity: 1
    })),
  ]),
  transition(':leave', [
    animate('250ms ease-out', style({
      transform: 'scale3d(0.95, 0.95, 1)',
      opacity: 0
    }))
  ])
])

Example #10

Source File: animations.ts From StraxUI with MIT License

6 votes

public static expand = [
    trigger('state', [
      state(
        'visible',
        style({
          opacity: '1'
        })
      ),
      state(
        'hidden',
        style({
          opacity: '0'
        })
      ),
      transition('* => visible', [animate('500ms ease-out')]),
      transition('visible => hidden', [animate('500ms ease-out')])
    ])
  ];

Example #11

Source File: error-toastr.component.ts From angular-material-admin with MIT License

6 votes

@Component({
  selector: 'app-error-toastr',
  templateUrl: './error-toastr.component.html',
  styleUrls: ['./error-toastr.component.scss'],
  animations: [
    trigger('flyInOut', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      state('removed', style({ opacity: 0 })),
      transition(
        'inactive => active',
        animate('{{ easeTime }}ms {{ easing }}')
      ),
      transition(
        'active => removed',
        animate('{{ easeTime }}ms {{ easing }}')
      )
    ])
  ],
  preserveWhitespaces: false
})
export class ErrorToastrComponent extends Toast {
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
  }
}

Example #12

Source File: animations.ts From StraxUI with MIT License

6 votes

public static fadeInOut = [
    trigger('fadeIn', [
      transition(':enter', [
        style({
          opacity: 0
        }),
        animate(400)
      ]),
      transition(':leave',
                 animate(
                   400,
                   style({ opacity: 0 })
                 )
      )
    ])
  ];

Example #13

Source File: tooltip.component.ts From sba-angular with MIT License

6 votes

@Component({
  selector: 'sqx-tooltip',
  styleUrls: ['./tooltip.component.css'],
  template: `<div class="sq-tooltip" @tooltip [innerHTML]="text"></div>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('tooltip', [
      transition(':enter', [
        style({opacity: 0}),
        animate(300, style({opacity: 1})),
      ]),
      transition(':leave', [
        animate(300, style({opacity: 0})),
      ]),
    ]),
  ],
})
export class TooltipComponent {
  text = '';
}

Example #14

Source File: helpers.ts From youpez-admin with MIT License

6 votes

defaultRouterTransition = trigger('defaultRouterAnimation', [
  transition('* => *', [
    query(
      ':enter',
      [style({opacity: 0,})],
      {optional: true}
    ),
    query(
      ':leave',
      [style({opacity: 1,}), animate('0.3s cubic-bezier(.785, .135, .15, .86)', style({opacity: 0}))],
      {optional: true}
    ),
    query(
      ':enter',
      [style({opacity: 0,}), animate('0.3s cubic-bezier(.785, .135, .15, .86)', style({opacity: 1}))],
      {optional: true}
    )
  ])
])

Example #15

Source File: slide.animation.ts From ng-ant-admin with MIT License

6 votes

slideUpOnLeaveAnimation = trigger('slideUpOnLeaveAnimation', [
  transition(':leave', [
    style({overflow: 'hidden'}),
    animate('.125s ease-out', style({
      height: 0,
      opacity: 0
    }))
  ])
])

Example #16

Source File: matx-animations.ts From matx-angular with MIT License

6 votes

matxAnimations = [
  trigger("animate", [transition("void => *", [useAnimation(reusable)])]),

  trigger("fadeInOut", [
    state(
      "0",
      style({
        opacity: 0,
        display: "none"
      })
    ),
    state(
      "1",
      style({
        opacity: 1,
        display: "block"
      })
    ),
    transition("0 => 1", animate("300ms")),
    transition("1 => 0", animate("300ms"))
  ])
]

Example #17

Source File: fade.animation.ts From onchat-web with Apache License 2.0

6 votes

fadeRouteAnimation = trigger('fadeRouteAnimation', [
    transition('* <=> *', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%'
            }),
            animateChild(),
        ], options),
        query(':enter', [
            style({ opacity: 0 })
        ], options),
        group([
            query(':leave', [
                animate('5s ease-in', style({ opacity: 0 }))
            ], options),
            query(':enter', [
                animate('5s ease-in', style({ opacity: 1 }))
            ], options)
        ]),
    ])
])

Example #18

Source File: list-animation.ts From rubic-app with GNU General Public License v3.0

6 votes

LIST_ANIMATION = trigger('listAnimation', [
  state('hidden', style({ opacity: '0.4' })),
  state(
    'shown',
    style({
      opacity: '1'
    })
  ),
  transition('hidden => shown', animate('0.28s ease-in-out'))
])

Example #19

Source File: fade.animation.ts From onchat-web with Apache License 2.0

6 votes

fadeAnimation = trigger('fadeAnimation', [
    transition(':enter', [
        style({
            transform: 'scale3d(1.075, 1.075, 1)',
            opacity: 0,
        }),
        animate('250ms ease-out', style({
            transform: 'scale3d(1, 1, 1)',
            opacity: 1
        })),
    ]),
    transition(':leave', [
        animate('250ms ease-out', style({
            transform: 'scale3d(0.95, 0.95, 1)',
            opacity: 0
        }))
    ])
])

Example #20

Source File: animations.ts From Angular-Cookbook with MIT License

6 votes

ANIMATIONS = {
  LIST_ANIMATION: trigger('listAnimation', [
    transition('* <=> *', [
      query(
        ':enter',
        [
          style({
            opacity: 0,
          }),
          stagger(100, [
            animate(
              '0.5s ease',
              style({
                opacity: 1,
              })
            ),
          ]),
        ],
        { optional: true }
      ),
      query(
        ':leave',
        [
          stagger(100, [
            animate(
              '0.5s ease',
              style({
                opacity: 0,
              })
            ),
          ]),
        ],
        { optional: true }
      ),
    ]),
  ]),
}

Example #21

Source File: animations.ts From pantry_party with Apache License 2.0

6 votes

slideOutLeftAnimation = trigger(
  "slideLeftOut",
  [
    state("in", style({ opacity: 1, transform: "translateX(0)" })),
    transition("void => *", [
      style({ opacity: 0, transform: "translateX(100%)" }),
      animate(200)
    ]),
    transition("* => void", [
      animate(200, style({ opacity: 0, transform: "translateX(-100%)" }))
    ])
  ]
)

Example #22

Source File: slide.animation.ts From ng-ant-admin with MIT License

6 votes

slideDownOnEnterAnimation = trigger('slideDownOnEnterAnimation', [
  transition(':enter', [
    style({
      overflow: 'hidden',
      height: 0,
      opacity: 0
    }),
    animate('.125s ease-out', style({
      height: '*',
      opacity: 1
    }))
  ])
])

Example #23

Source File: animations.ts From Angular-Cookbook with MIT License

6 votes

ROUTE_ANIMATION = trigger('routeAnimation', [
  transition('* <=> *', [
    style({
      position: 'relative',
    }),
    query(
      ':enter, :leave',
      [
        style({
          position: 'absolute',
          width: '100%',
        }),
      ],
      { optional: true }
    ),
    query(
      ':enter',
      [
        style({
          opacity: 0,
        }),
      ],
      { optional: true }
    ),
    query(':leave', [animate('300ms ease-out', style({ opacity: 0 }))], {
      optional: true,
    }),
    query(':enter', [animate('300ms ease-in', style({ opacity: 1 }))], {
      optional: true,
    }),
  ]),
])

Example #24

Source File: animations.ts From pantry_party with Apache License 2.0

6 votes

slideInOutDownAnimation = [
  trigger(
    "slideInOut",
    [
      state("in", style({
        opacity: 1,
        transform: "translateY(0) scaleY(1)"
      })),
      state("void", style({
        opacity: 0,
        transform: "translateY(-20%) scaleY(0)"
      })),
      transition("void => *", [animate("500ms 200ms ease-out")]),
      transition("* => void", [animate("600ms ease-in")])
    ]
  )
]

Example #25

Source File: animations.ts From Angular-Cookbook with MIT License

6 votes

ANIMATIONS = {
  LIST_ANIMATION: trigger('listAnimation', [
    transition('* <=> *', [
      query(':enter', [
        style({
          opacity: 0
        }),
        stagger(100, [
          animate('0.5s ease', style({
            opacity: 1
          }))
        ])
      ], { optional: true }),
      query(':leave', [
        stagger(100, [
          animate('0.1s ease', style({
            opacity: 0
          }))
        ])
      ], {optional: true})
    ]),
  ])
}

Example #26

Source File: slide.animation.ts From ng-ant-admin with MIT License

5 votes

horizontalSlideInRouteAnimation = trigger('horizontalSlideInRouteAnimation', [
  transition(':increment', [
    style({position: 'relative'}),
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      }),
      animateChild(),
    ], options),

    query(':enter', [
      style({transform: 'translate3d(100%,0,0)'})
    ], options),

    group([
      query(':leave', [
        animate('.3s ease-out', style({transform: 'translate3d(-100%,0,0)'}))
      ], options),
      query(':enter', [
        animate('.3s ease-out', style({transform: 'none'}))
      ], options)
    ]),
  ]),

  transition(':decrement', [
    style({position: 'relative'}),
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      }),
      animateChild(),
    ], options),

    query(':enter', [
      style({transform: 'translate3d(-100%,0,0)'})
    ], options),

    group([
      query(':leave', [
        animate('.3s ease-out', style({transform: 'translate3d(100%,0,0)'}))
      ], options),
      query(':enter', [
        animate('.3s ease-out', style({transform: 'none'}))
      ], options)
    ])
  ])
])

Example #27

Source File: menu-sheet.component.ts From Elastos.Essentials.App with MIT License

5 votes

@Component({
  selector: 'app-menu-sheet',
  templateUrl: './menu-sheet.component.html',
  styleUrls: ['./menu-sheet.component.scss'],
  animations: [
    trigger('enterTrigger', [
      state('fadeIn', style({
        opacity: '1',
        transform: 'translateY(0%)'
      })),
      transition('void => *', [style({ opacity: '0', transform: 'translateY(50%)' }), animate('500ms')])
    ])
  ]
})
export class MenuSheetComponent implements OnInit {
  public menu: MenuSheetMenu = null;
  public selectedMenu: MenuSheetMenu = null;

  private navStack = new Stack<MenuSheetMenu>();

  constructor(
    private navParams: NavParams,
    public theme: GlobalThemeService,
    private modalCtrl: ModalController,
    private nav: GlobalNavService
  ) { }

  ngOnInit(): void {
    let options = this.navParams.data as MenuSheetComponentOptions;
    this.menu = options.menu;
    this.selectedMenu = this.menu;
  }

  ionViewWillEnter() {
  }

  public onMenuItemClicked(menuItem: MenuSheetMenu) {
    if (menuItem.items) {
      this.navStack.push(this.selectedMenu); // Saves the current menu to be able to go back
      this.selectedMenu = menuItem; // Enters the submenu
    }
    else {
      this.dismiss();

      if (typeof menuItem.routeOrAction === "string")
        void this.nav.navigateTo(null, menuItem.routeOrAction);
      else {
        void menuItem.routeOrAction();
      }
    }
  }

  public canGoBack(): boolean {
    return this.navStack.length > 0;
  }

  public goBack() {
    let previousMenu = this.navStack.pop();
    this.selectedMenu = previousMenu;
  }

  private dismiss() {
    void this.modalCtrl.dismiss();
  }
}

Example #28

Source File: fadeIn.animation.ts From dating-client with MIT License

5 votes

fadeIdAnimation = trigger('fadeIn', [
  // transition('void => *', [
  transition(':enter', fadeInSteps)
])

Example #29

Source File: slide.animation.ts From onchat-web with Apache License 2.0

5 votes

horizontalSlideInRouteAnimation = trigger('horizontalSlideInRouteAnimation', [
    transition(':increment', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%'
            }),
            animateChild(),
        ], options),

        query(':enter', [
            style({ transform: 'translate3d(100%,0,0)' })
        ], options),

        group([
            query(':leave', [
                animate('.3s ease-out', style({ transform: 'translate3d(-100%,0,0)' }))
            ], options),
            query(':enter', [
                animate('.3s ease-out', style({ transform: 'none' }))
            ], options)
        ]),
    ]),

    transition(':decrement', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%'
            }),
            animateChild(),
        ], options),

        query(':enter', [
            style({ transform: 'translate3d(-100%,0,0)' })
        ], options),

        group([
            query(':leave', [
                animate('.3s ease-out', style({ transform: 'translate3d(100%,0,0)' }))
            ], options),
            query(':enter', [
                animate('.3s ease-out', style({ transform: 'none' }))
            ], options)
        ])
    ])
])