ngx-animations
Version:
An adaptation of Animate.css using @angular/animations
28 lines • 4.21 kB
JavaScript
import { transition, query, style } from '@angular/animations';
import { animations } from '../model/animations-list';
/*
* Build route transition that can be used in the @Component animations
* Usage Example :
* @Component({
* selector: 'my-app',
* templateUrl: './app.component.html',
* styleUrls: ['./app.component.css'],
* animations: [
* buildRouteTransition({ stateChangeExpr: '* => *',
* enter: animations.bounceIn(200),
* leave: animations.bounceOut(200)})
* ]
* })
*/
export function buildRouteTransition(options = {}) {
return transition(options.stateChangeExpr || '* => *', [
query(':enter', [style({ opacity: 0, position: 'absolute' })], { optional: true }),
query(':leave', [style({ position: 'absolute' }), ...(options.leave || animations.bounceOut(200))], {
optional: true
}),
query(':enter', [style({ position: 'absolute' }), ...(options.enter || animations.bounceIn(200))], {
optional: true
})
]);
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNpdGlvbi1idWlsZGVyLmpzIiwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uL2xpYnMvbmd4LWFuaW1hdGlvbnMvc3JjLyIsInNvdXJjZXMiOlsibGliL3JvdXRpbmcvdHJhbnNpdGlvbi1idWlsZGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFHTCxVQUFVLEVBQ1YsS0FBSyxFQUNMLEtBQUssRUFFTixNQUFNLHFCQUFxQixDQUFDO0FBQzdCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUV0RDs7Ozs7Ozs7Ozs7OztHQWFHO0FBQ0gsTUFBTSxVQUFVLG9CQUFvQixDQUNsQyxVQUlJLEVBQUU7SUFFTixPQUFPLFVBQVUsQ0FBQyxPQUFPLENBQUMsZUFBZSxJQUFJLFFBQVEsRUFBRTtRQUNyRCxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUMsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDO1FBQ2xGLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLENBQUMsRUFBRSxHQUFHLENBQUMsT0FBTyxDQUFDLEtBQUssSUFBSSxVQUFVLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUNsRyxRQUFRLEVBQUUsSUFBSTtTQUNmLENBQUM7UUFDRixLQUFLLENBQUMsUUFBUSxFQUFFLENBQUMsS0FBSyxDQUFDLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxDQUFDLEVBQUUsR0FBRyxDQUFDLE9BQU8sQ0FBQyxLQUFLLElBQUksVUFBVSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDakcsUUFBUSxFQUFFLElBQUk7U0FDZixDQUFDO0tBQ0gsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQW5pbWF0aW9uU3R5bGVNZXRhZGF0YSxcclxuICBBbmltYXRpb25BbmltYXRlTWV0YWRhdGEsXHJcbiAgdHJhbnNpdGlvbixcclxuICBxdWVyeSxcclxuICBzdHlsZSxcclxuICBBbmltYXRpb25UcmFuc2l0aW9uTWV0YWRhdGFcclxufSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcclxuaW1wb3J0IHsgYW5pbWF0aW9ucyB9IGZyb20gJy4uL21vZGVsL2FuaW1hdGlvbnMtbGlzdCc7XHJcblxyXG4vKlxyXG4gKiBCdWlsZCByb3V0ZSB0cmFuc2l0aW9uIHRoYXQgY2FuIGJlIHVzZWQgaW4gdGhlIEBDb21wb25lbnQgYW5pbWF0aW9uc1xyXG4gKiBVc2FnZSBFeGFtcGxlIDpcclxuICogQENvbXBvbmVudCh7XHJcbiAqICAgc2VsZWN0b3I6ICdteS1hcHAnLFxyXG4gKiAgIHRlbXBsYXRlVXJsOiAnLi9hcHAuY29tcG9uZW50Lmh0bWwnLFxyXG4gKiAgIHN0eWxlVXJsczogWycuL2FwcC5jb21wb25lbnQuY3NzJ10sXHJcbiAqICAgYW5pbWF0aW9uczogW1xyXG4gKiAgICBidWlsZFJvdXRlVHJhbnNpdGlvbih7IHN0YXRlQ2hhbmdlRXhwcjogJyogPT4gKicsXHJcbiAqICAgICBlbnRlcjogYW5pbWF0aW9ucy5ib3VuY2VJbigyMDApLFxyXG4gKiAgICAgbGVhdmU6IGFuaW1hdGlvbnMuYm91bmNlT3V0KDIwMCl9KVxyXG4gKiAgIF1cclxuICogfSlcclxuICovXHJcbmV4cG9ydCBmdW5jdGlvbiBidWlsZFJvdXRlVHJhbnNpdGlvbihcclxuICBvcHRpb25zOiB7XHJcbiAgICBzdGF0ZUNoYW5nZUV4cHI/OiBzdHJpbmc7XHJcbiAgICBlbnRlcj86IChBbmltYXRpb25TdHlsZU1ldGFkYXRhIHwgQW5pbWF0aW9uQW5pbWF0ZU1ldGFkYXRhKVtdO1xyXG4gICAgbGVhdmU/OiAoQW5pbWF0aW9uU3R5bGVNZXRhZGF0YSB8IEFuaW1hdGlvbkFuaW1hdGVNZXRhZGF0YSlbXTtcclxuICB9ID0ge31cclxuKTogQW5pbWF0aW9uVHJhbnNpdGlvbk1ldGFkYXRhIHtcclxuICByZXR1cm4gdHJhbnNpdGlvbihvcHRpb25zLnN0YXRlQ2hhbmdlRXhwciB8fCAnKiA9PiAqJywgW1xyXG4gICAgcXVlcnkoJzplbnRlcicsIFtzdHlsZSh7IG9wYWNpdHk6IDAsIHBvc2l0aW9uOiAnYWJzb2x1dGUnIH0pXSwgeyBvcHRpb25hbDogdHJ1ZSB9KSxcclxuICAgIHF1ZXJ5KCc6bGVhdmUnLCBbc3R5bGUoeyBwb3NpdGlvbjogJ2Fic29sdXRlJyB9KSwgLi4uKG9wdGlvbnMubGVhdmUgfHwgYW5pbWF0aW9ucy5ib3VuY2VPdXQoMjAwKSldLCB7XHJcbiAgICAgIG9wdGlvbmFsOiB0cnVlXHJcbiAgICB9KSxcclxuICAgIHF1ZXJ5KCc6ZW50ZXInLCBbc3R5bGUoeyBwb3NpdGlvbjogJ2Fic29sdXRlJyB9KSwgLi4uKG9wdGlvbnMuZW50ZXIgfHwgYW5pbWF0aW9ucy5ib3VuY2VJbigyMDApKV0sIHtcclxuICAgICAgb3B0aW9uYWw6IHRydWVcclxuICAgIH0pXHJcbiAgXSk7XHJcbn1cclxuIl19