ngx-contextual-action-bar
Version:
ngx-contextual-action-bar is an Angular2+ implementation of the [Material Design Contextual Action Bar](https://material.io/components/app-bars-top#contextual-action-bar). The implementation makes it possible to change the action bar properties (i.e. titl
19 lines • 3.84 kB
JavaScript
import { animate, state, style, transition, trigger } from "@angular/animations";
import * as easings from '../material/easings';
import * as timings from '../material/timings';
export const navbarAnimation = trigger('navbar', [
state('transparent', style({ position: 'absolute' })),
state('fixed', style({ position: 'relative' })),
state('visible', style({ position: 'sticky' })),
transition('fixed => visible', [
style({ position: 'sticky', transform: 'translateY(-100%)' }),
animate(`${timings.medium_enter} ${easings.decelerated}`, style({ transform: 'translateY(0%)' })),
]),
transition('visible => fixed', [
style({ position: 'sticky', transform: 'translateY(0%)' }),
animate(`${timings.medium_leave} ${easings.accelerated}`, style({ transform: 'translateY(-100%)' })),
style({ position: 'relative' })
]),
transition('* => noanim', [])
]);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmFuaW1hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29udGV4dHVhbC1hY3Rpb24tYmFyL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9hbmltYXRpb25zL25hdmJhci5hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUVqRixPQUFPLEtBQUssT0FBTyxNQUFNLHFCQUFxQixDQUFDO0FBQy9DLE9BQU8sS0FBSyxPQUFPLE1BQU0scUJBQXFCLENBQUM7QUFFL0MsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLE9BQU8sQ0FBQyxRQUFRLEVBQUU7SUFDN0MsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztJQUNyRCxLQUFLLENBQUMsT0FBTyxFQUFLLEtBQUssQ0FBQyxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDO0lBQ2xELEtBQUssQ0FBQyxTQUFTLEVBQUcsS0FBSyxDQUFDLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUM7SUFDaEQsVUFBVSxDQUFDLGtCQUFrQixFQUFFO1FBQzNCLEtBQUssQ0FBQyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLG1CQUFtQixFQUFFLENBQUM7UUFDN0QsT0FBTyxDQUFDLEdBQUcsT0FBTyxDQUFDLFlBQVksSUFBSSxPQUFPLENBQUMsV0FBVyxFQUFFLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLENBQUMsQ0FBQztLQUNwRyxDQUFDO0lBQ0YsVUFBVSxDQUFDLGtCQUFrQixFQUFFO1FBQzNCLEtBQUssQ0FBQyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLENBQUM7UUFDMUQsT0FBTyxDQUFDLEdBQUcsT0FBTyxDQUFDLFlBQVksSUFBSSxPQUFPLENBQUMsV0FBVyxFQUFFLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLG1CQUFtQixFQUFFLENBQUMsQ0FBQztRQUNwRyxLQUFLLENBQUMsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLENBQUM7S0FDbEMsQ0FBQztJQUNGLFVBQVUsQ0FBQyxhQUFhLEVBQUUsRUFBRSxDQUFDO0NBQ2hDLENBQUMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGFuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciB9IGZyb20gXCJAYW5ndWxhci9hbmltYXRpb25zXCI7XHJcblxyXG5pbXBvcnQgKiBhcyBlYXNpbmdzIGZyb20gJy4uL21hdGVyaWFsL2Vhc2luZ3MnO1xyXG5pbXBvcnQgKiBhcyB0aW1pbmdzIGZyb20gJy4uL21hdGVyaWFsL3RpbWluZ3MnO1xyXG5cclxuZXhwb3J0IGNvbnN0IG5hdmJhckFuaW1hdGlvbiA9IHRyaWdnZXIoJ25hdmJhcicsIFtcclxuICAgIHN0YXRlKCd0cmFuc3BhcmVudCcsIHN0eWxlKHsgcG9zaXRpb246ICdhYnNvbHV0ZScgfSkpLFxyXG4gICAgc3RhdGUoJ2ZpeGVkJywgICAgc3R5bGUoeyBwb3NpdGlvbjogJ3JlbGF0aXZlJyB9KSksXHJcbiAgICBzdGF0ZSgndmlzaWJsZScsICBzdHlsZSh7IHBvc2l0aW9uOiAnc3RpY2t5JyB9KSksXHJcbiAgICB0cmFuc2l0aW9uKCdmaXhlZCA9PiB2aXNpYmxlJywgW1xyXG4gICAgICAgIHN0eWxlKHsgcG9zaXRpb246ICdzdGlja3knLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC0xMDAlKScgfSksXHJcbiAgICAgICAgYW5pbWF0ZShgJHt0aW1pbmdzLm1lZGl1bV9lbnRlcn0gJHtlYXNpbmdzLmRlY2VsZXJhdGVkfWAsIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgwJSknIH0pKSxcclxuICAgIF0pLFxyXG4gICAgdHJhbnNpdGlvbigndmlzaWJsZSA9PiBmaXhlZCcsIFtcclxuICAgICAgICBzdHlsZSh7IHBvc2l0aW9uOiAnc3RpY2t5JywgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgwJSknIH0pLFxyXG4gICAgICAgIGFuaW1hdGUoYCR7dGltaW5ncy5tZWRpdW1fbGVhdmV9ICR7ZWFzaW5ncy5hY2NlbGVyYXRlZH1gLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoLTEwMCUpJyB9KSksXHJcbiAgICAgICAgc3R5bGUoeyBwb3NpdGlvbjogJ3JlbGF0aXZlJyB9KVxyXG4gICAgXSksXHJcbiAgICB0cmFuc2l0aW9uKCcqID0+IG5vYW5pbScsIFtdKVxyXG5dKSJdfQ==