How to use the @angular/animations.sequence 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.

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

github angular / animations-builds / @angular / animations / browser.js View on Github external
function buildAnimationKeyframes(ast, startingStyles = {}, finalStyles = {}) {
    const /** @type {?} */ normalizedAst = Array.isArray(ast) ? sequence(/** @type {?} */ (ast)) : (ast);
    return new AnimationTimelineVisitor().buildKeyframes(normalizedAst, startingStyles, finalStyles);
}
class AnimationTimelineContext {
github angular / animations-builds / @angular / animations / browser.es5.js View on Github external
function AnimationTransitionFactory(_triggerName, ast, matchFns, _stateStyles) {
        this._triggerName = _triggerName;
        this.matchFns = matchFns;
        this._stateStyles = _stateStyles;
        var normalizedAst = Array.isArray(ast.animation) ?
            sequence(ast.animation) :
            ast.animation;
        this._animationAst = normalizedAst;
    }
    /**
github angular / animations-builds / @angular / animations / browser.es5.js View on Github external
function validateAnimationSequence(ast) {
    var /** @type {?} */ normalizedAst = Array.isArray(ast) ? sequence(/** @type {?} */ (ast)) : (ast);
    return new AnimationValidatorVisitor().validate(normalizedAst);
}
var AnimationValidatorVisitor = (function () {
github Alfresco / alfresco-ng2-components / lib / core / context-menu / animations.ts View on Github external
style,
    animate,
    transition,
    query,
    group,
    sequence,
    AnimationStateMetadata,
    AnimationTransitionMetadata
} from '@angular/animations';

export const contextMenuAnimation: ( AnimationStateMetadata | AnimationTransitionMetadata)[] = [
    state('void', style({
        opacity: 0,
        transform: 'scale(0.01, 0.01)'
    })),
    transition('void => *', sequence([
        query('.mat-menu-content', style({ opacity: 0 })),
        animate('100ms linear', style({ opacity: 1, transform: 'scale(1, 0.5)' })),
        group([
            query('.mat-menu-content', animate('400ms cubic-bezier(0.55, 0, 0.55, 0.2)',
                style({ opacity: 1 })
            )),
            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ transform: 'scale(1, 1)' }))
        ])
    ])),
    transition('* => void', animate('150ms 50ms linear', style({ opacity: 0 })))
];
github angular / animations-builds / @angular / animations / browser.js View on Github external
function validateAnimationSequence(ast) {
    const /** @type {?} */ normalizedAst = Array.isArray(ast) ? sequence(/** @type {?} */ (ast)) : (ast);
    return new AnimationValidatorVisitor().validate(normalizedAst);
}
class AnimationValidatorVisitor {
github ngx-kit / sula / projects / ui / src / lib / ui-loading-bar / ui-loading-bar / ui-loading-bar.component.ts View on Github external
opacity: 1,
      })),
      transition(`${KitLoadingState.None} => ${KitLoadingState.InProgress}`, [
        style({
          transform: 'translateX(-100%)',
          opacity: 0,
        }),
        animate('50ms', style({
          opacity: 1,
        })),
        animate('50000ms cubic-bezier(0,1.13,.32,.91)', style({
          transform: 'translateX(0)',
        })),
      ]),
      transition(`${KitLoadingState.InProgress} => ${KitLoadingState.None}`,
        sequence([
          animate('150ms ease-in', style({
            opacity: 1,
            transform: 'translateX(0)',
          })),
          animate('150ms', style({
            opacity: 0,
          })),
          animate('10ms', style({
            transform: 'translateX(-100%)',
          })),
        ])),
    ]),
  ],
})
export class UiLoadingBarComponent implements OnInit, OnChanges, OnDestroy {
  @Input() id = kitLoadingGlobal;
github angular / animations-builds / @angular / animations / browser.js View on Github external
constructor(_triggerName, ast, matchFns, _stateStyles) {
        this._triggerName = _triggerName;
        this.matchFns = matchFns;
        this._stateStyles = _stateStyles;
        const normalizedAst = Array.isArray(ast.animation) ?
            sequence(ast.animation) :
            ast.animation;
        this._animationAst = normalizedAst;
    }
    /**
github VadimDez / ng2-pdf-viewer / build / lib / @angular / platform-browser / @angular / platform-browser / animations.js View on Github external
build(animation) {
        const /** @type {?} */ id = this._nextAnimationId.toString();
        this._nextAnimationId++;
        const /** @type {?} */ entry = Array.isArray(animation) ? sequence(animation) : animation;
        issueAnimationCommand(this._renderer, null, id, 'register', [entry]);
        return new BrowserAnimationFactory(id, this._renderer);
    }
}
github johandb / svg-drawing-tool / node_modules / @angular / platform-browser / fesm5 / animations.js View on Github external
BrowserAnimationBuilder.prototype.build = function (animation) {
        var id = this._nextAnimationId.toString();
        this._nextAnimationId++;
        var entry = Array.isArray(animation) ? sequence(animation) : animation;
        issueAnimationCommand(this._renderer, null, id, 'register', [entry]);
        return new BrowserAnimationFactory(id, this._renderer);
    };
    BrowserAnimationBuilder = __decorate([
github johandb / svg-drawing-tool / node_modules / @angular / platform-browser / esm5 / animations / src / animation_builder.js View on Github external
BrowserAnimationBuilder.prototype.build = function (animation) {
        var id = this._nextAnimationId.toString();
        this._nextAnimationId++;
        var entry = Array.isArray(animation) ? sequence(animation) : animation;
        issueAnimationCommand(this._renderer, null, id, 'register', [entry]);
        return new BrowserAnimationFactory(id, this._renderer);
    };
    BrowserAnimationBuilder = tslib_1.__decorate([