animations

To help you get started, we’ve selected a few @angular/animations examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

dynatrace-oss / barista / components / empty-state / src / empty-state.ts View on Github

* an ``.
 */
@Component({
  selector: 'dt-empty-state',
  exportAs: 'dtEmptyState',
  template: '',
  styleUrls: ['empty-state.scss'],
  host: {
    class: 'dt-empty-state',
    '[@fadeIn]': '_visibility',
  },
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.Emulated,
  animations: [
    trigger('fadeIn', [
      state('hidden', style({ opacity: 0 })),
      state('visible', style({ opacity: 1 })),
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 })),
      ]),
    ]),
  ],
})
export class DtEmptyState
  implements AfterContentInit, AfterViewInit, OnDestroy {
  /** @internal Empty state items (1..n) */
  @ContentChildren(DtEmptyStateItem)
  _items: QueryList;

  private readonly _destroy$ = new Subject();

fivethree-team / ionic-4-components / projects / dialog / src / lib / dialog.component.ts View on Github

export type animation = "slideIn" | "fadeIn"
export type verticalAlign = "top" | "bottom" | "center"

@Component({
  selector: 'fiv-dialog',
  template: `
  <div class="gg-backdrop">
  </div>
  <div class="gg-dialog" mode="md">
  
  </div>
  `,
  styleUrls: ['dialog.scss'],
  animations: [
    trigger('dialogAnim', [
      transition('hidden =&gt; slideIn-top', [
        style({
          transform: 'translateY(-100%)'
        }),
        animate('275ms 100ms cubic-bezier(0.32,1,0.23,1)')
      ]),
      transition('hidden =&gt; slideIn-bottom', [
        style({
          transform: 'translateY(100%)'
        }),
        animate('275ms 100ms cubic-bezier(0.32,1,0.23,1)')
      ]),
      transition('hidden =&gt; fadeIn-bottom', [
        style({
          opacity: 0
        }),

SchweizerischeBundesbahnen / scion-workbench / projects / scion / workbench / src / lib / message-box / message-box-stack.component.ts View on Github

import { animate, AnimationMetadata, style, transition, trigger } from '@angular/animations';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';

import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { MessageBoxService } from './message-box.service';
import { Action, WbMessageBox } from './message-box';
import { MessageBoxComponent } from './message-box.component';

@Component({
  selector: 'wb-message-box-stack',
  templateUrl: './message-box-stack.component.html',
  styleUrls: ['./message-box-stack.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('enter', MessageBoxStackComponent.provideEnterAnimation()),
    trigger('leave', MessageBoxStackComponent.provideLeaveAnimation()),
  ],
})
export class MessageBoxStackComponent implements OnDestroy {

  private _destroy$ = new Subject();

  public messageBoxes: WbMessageBox[] = [];

  constructor(messageBoxService: MessageBoxService, private _cd: ChangeDetectorRef) {
    messageBoxService.open$
      .pipe(takeUntil(this._destroy$))
      .subscribe((messageBox) =&gt; {
        this.messageBoxes.push(messageBox);
        this._cd.markForCheck();
      });

edu-sharing / Edu-Sharing / Frontend / src / app / modules / management-dialogs / node-template / node-template.component.ts View on Github

import {Toast} from "../../../common/ui/toast";
import {ModalDialogComponent, DialogButton} from "../../../common/ui/modal-dialog/modal-dialog.component";
import {Translation} from "../../../common/translation";
import {TranslateService} from "@ngx-translate/core";
import {DateHelper} from "../../../common/ui/DateHelper";
import {trigger} from "@angular/animations";
import {UIAnimation} from "../../../common/ui/ui-animation";
import {MdsComponent} from "../../../common/ui/mds/mds.component";

@Component({
  selector: 'node-template',
  templateUrl: 'node-template.component.html',
  styleUrls: ['node-template.component.scss'],
  animations: [
    trigger('fade', UIAnimation.fade()),
    trigger('cardAnimation', UIAnimation.cardAnimation()),
  ]
})
export class NodeTemplateComponent  {
    @ViewChild('mds') mdsRef : MdsComponent;
    loading : boolean;
    _nodeId: string;
    node: Node;
    enabled: boolean;
  @Input() set nodeId(nodeId : string){
    this._nodeId=nodeId;
    this.loading=true;
    this.nodeService.getNodeMetadata(nodeId).subscribe((parent)=>{
        this.nodeService.getNodeTemplate(nodeId).subscribe((data)=>{
            this.node=data.node;
            this.enabled=data.enabled;
            if(!data.enabled){

outcobra / outstanding-cobra / frontend / src / app / oc-ui / components / oc-collapsible / oc-collapsible.ts View on Github

})
export class OCCollapsibleBodyComponent {
}

@Component({
    selector: 'oc-collapsible',
    template: `
        
        <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')

NG-ZORRO / ng-zorro-antd / components / core / animation / zoom.ts View on Github

transform: 'scale(1)'
      })
    )
  ]),
  transition('active => void', [
    style({ opacity: 1, transform: 'scale(1)' }),
    animate(
      `${AnimationDuration.BASE} ${AnimationCurves.EASE_IN_OUT_CIRC}`,
      style({
        opacity: 0,
        transform: 'scale(0.8)'
      })
    )
  ])
]);
export const zoomBadgeMotion: AnimationTriggerMetadata = trigger('zoomBadgeMotion', [
  transition(':enter', [
    style({ opacity: 0, transform: 'scale(0) translate(50%, -50%)' }),
    animate(
      `${AnimationDuration.SLOW} ${AnimationCurves.EASE_OUT_BACK}`,
      style({
        opacity: 1,
        transform: 'scale(1) translate(50%, -50%)'
      })
    )
  ]),
  transition(':leave', [
    style({ opacity: 1, transform: 'scale(1) translate(50%, -50%)' }),
    animate(
      `${AnimationDuration.SLOW} ${AnimationCurves.EASE_IN_BACK}`,
      style({
        opacity: 0,

fivethree-team / ionic-4-components / dist / ionic-material-loading / fesm5 / ionic-material-loading.js View on Github

}),
                                animate('360ms ease-out')
                            ]),
                            state('fill', style({
                                'stroke-dasharray': 315,
                                'stroke-dashoffset': 0,
                                'transformOrigin': 'center',
                                'stroke': '#1B9A59',
                            }))
                        ]),
                        trigger('spinnerAnim', [
                            transition('* => void', [
                                animate('250ms ease-out', style({ opacity: 0 }))
                            ]),
                        ]),
                        trigger('hintAnim', [
                            transition('void => *', [
                                style({ opacity: 0, transform: 'translateY(-80px)' }),
                                animate('150ms ease-in', style({ opacity: 1, transform: 'translateY(0)' }))
                            ]),
                            transition('* => void', [
                                style({ width: '112px' }),
                                animate('125ms ease-out', style({ width: '40px' }))
                            ]),
                        ]),
                    ],
                    styles: [".spinner{position:absolute;width:24px;height:24px;left:8px;top:8px}.rotate{-webkit-animation:1.4s linear infinite rotator;animation:1.4s linear infinite rotator}@-webkit-keyframes rotator{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotator{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}.path{stroke-dasharray:187;stroke-dashoffset:0;-webkit-transform-origin:center;transform-origin:center;-webkit-animation:1.4s ease-in-out infinite dash,5.6s ease-in-out infinite colors;animation:1.4s ease-in-out infinite dash,5.6s ease-in-out infinite colors}.fill{stroke-dasharray:360;stroke-dashoffset:0;-webkit-transform-origin:center;transform-origin:center;-webkit-animation:1.4s ease-out fill;animation:1.4s ease-out fill;stroke:#1b9a59}@-webkit-keyframes colors{0%,100%{stroke:#4285f4}25%{stroke:#de3e35}50%{stroke:#f7c223}75%{stroke:#1b9a59}}@keyframes colors{0%,100%{stroke:#4285f4}25%{stroke:#de3e35}50%{stroke:#f7c223}75%{stroke:#1b9a59}}@-webkit-keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}100%{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}100%{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@-webkit-keyframes fill{0%{stroke-dashoffset:360}80%{stroke-dashoffset:180;-webkit-transform:rotate(135deg);transform:rotate(135deg)}100%{stroke-dashoffset:0;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@keyframes fill{0%{stroke-dashoffset:360}80%{stroke-dashoffset:180;-webkit-transform:rotate(135deg);transform:rotate(135deg)}100%{stroke-dashoffset:0;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}.gg-spinner-container{width:40px;height:40px;position:absolute;left:calc(50% - 20px);top:-56px;z-index:9;background:var(--ion-color-light);border-radius:50%;box-shadow:0 4px 6px 0 rgba(0,0,0,.14),0 4px 5px rgba(0,0,0,.1)}.gg-hint-container{height:40px;padding-left:8px;padding-right:8px;position:relative;background:var(--ion-color-light);border-radius:40px;box-shadow:0 4px 6px 0 rgba(0,0,0,.14),0 4px 5px rgba(0,0,0,.1);margin:0}.icon{height:20px;width:20px;background:0 0;color:var(--ion-color-dark)}.text{font-size:1em;color:var(--ion-color-dark)}.gg-hint-wrapper{width:100%;position:absolute;top:112px;z-index:8;text-align:center}"]
                }] }
    ];
    /** @nocollapse */
    ContentRefresh.ctorParameters = function () { return []; };
    ContentRefresh.propDecorators = {

linuxdeepin / deepin-appstore / src / web / src / app / dstore / components / carousel / carousel.component.ts View on Github

import { App } from '../../services/app';
import { SectionCarousel, CarouselType } from '../../services/section';
import { AppFilterFunc, Allowed } from '../appFilter';

const speed = 300;
const defaultStyle = style({ transform: 'translateX(0)' });
const toLeft = [style({ transform: 'translateX(100%)' }), animate(speed)];
const toRight = [style({ transform: 'translateX(-100%)' }), animate(speed)];

@Component({
  selector: 'dstore-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss'],
  animations: [
    trigger('carousel', [
      state('0', defaultStyle),
      state('1', defaultStyle),
      state('2', defaultStyle),

      transition('1 => 0', toLeft),
      transition('2 => 1', toLeft),
      transition('void => 2', toLeft),
      transition('void => 0', toRight),
      transition('0 => 1', toRight),
      transition('1 => 2', toRight),

      transition('0 => void', [
        style({ position: 'absolute' }),
        animate(speed, style({ transform: 'translateX(-100%)' })),
      ]),
      transition('2 => void', [

Teradata / covalent-nightly / common / animations / flash / flash.animation.js View on Github

export function TdFlashAnimation(flashOptions) {
    if (flashOptions === void 0) { flashOptions = {}; }
    return trigger(flashOptions.anchor || 'tdFlash', [
        state('0', style({
            opacity: 1,
        })),
        state('1', style({
            opacity: 1,
        })),
        transition('0 &lt;=&gt; 1', [
            group([
                query('@*', animateChild(), { optional: true }),
                animate((flashOptions.duration || 500) + 'ms ' + (flashOptions.delay || 0) + 'ms', keyframes([
                    style({ opacity: 1, offset: 0 }),
                    style({ opacity: 0, offset: 0.25 }),
                    style({ opacity: 1, offset: 0.5 }),
                    style({ opacity: 0, offset: 0.75 }),
                    style({ opacity: 1, offset: 1.0 }),
                ])),

edu-sharing / Edu-Sharing / Frontend / src / app / common / ui / main-nav / main-nav.component.ts View on Github

import {ConfigurationHelper} from "../../rest/configuration-helper";
import {CordovaService} from '../../services/cordova.service';
import {SessionStorageService} from "../../services/session-storage.service";
import {RestNodeService} from "../../rest/services/rest-node.service";
import {Translation} from "../../translation";
import {OptionItem} from "../actionbar/option-item";
import {HttpClient} from '@angular/common/http';
import {DialogButton} from '../modal-dialog/modal-dialog.component';
import {UIService} from '../../services/ui.service';

@Component({
  selector: 'main-nav',
  templateUrl: 'main-nav.component.html',
  styleUrls: ['main-nav.component.scss'],
  animations: [
    trigger('fromLeft', UIAnimation.fromLeft()),
    trigger('overlay', UIAnimation.openOverlay()),
    trigger('cardAnimation', UIAnimation.cardAnimation()),
    trigger('fade', UIAnimation.fade()),
    trigger('nodeStore', [
      transition(':enter', [
        animate(UIAnimation.ANIMATION_TIME_SLOW+'ms ease-in', keyframes([
          style({opacity: 0, top:'0', transform: 'scale(0.25)', offset: 0}),
          style({opacity: 1, top:'10px', transform: 'scale(1)', offset: 1}),
          //style({opacity:0,offset:0}),
          //style({opacity:1,offset:1}),

        ]))
      ]),
      transition(':leave', [
        animate(UIAnimation.ANIMATION_TIME_SLOW+'ms ease-in', keyframes([
          style({opacity: 1, transform: 'scale(1)', offset: 0}),

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

To help you get started, we’ve selected a few @angular/animations examples, based on popular ways it is used in public projects.

@angular/animations

Package Health Score

Popular @angular/animations functions

Similar packages