dspace-angular/src/app/shared/animations/slide.ts

import { animate, group, state, style, transition, trigger } from '@angular/animations';

export const slide = trigger('slide', [
  state('expanded', style({ height: '*' })),
  state('collapsed', style({ height: 0 })),
  state('void', style({ height: 0 })),
  state('*', style({ height: '*' })),
  transition(':enter', [animate('200ms')]),
  transition(':leave', [animate('200ms')]),
  transition('expanded <=> collapsed', animate(250))
]);

export const slideMobileNav = trigger('slideMobileNav', [

  state('expanded', style({ height: '*', minHeight: '*' })),

  state('collapsed', style({ height: 0, minHeight: 0 })),

  transition('expanded <=> collapsed', animate('300ms'))
]);

const collapsedSidebarStyle = style({ maxWidth: '{{collapsedWidth}}' });
const expandedSidebarStyle = style({ maxWidth: '{{expandedWidth}}' });
const unpinnedSidebarPageStyle = style({ paddingLeft: '{{collapsedWidth}}' });
const pinnedSidebarPageStyle = style({ paddingLeft: '{{expandedWidth}}' });
const hiddenSidebarPageStyle = style({ paddingLeft: '0' });
const options = { params: { collapsedWidth: '*', expandedWidth: '*' } };
const animation = '300ms ease-in-out';

export const slideSidebar = trigger('slideSidebar', [
  state('collapsed', collapsedSidebarStyle, options),
  state('expanded', expandedSidebarStyle, options),
  transition('expanded => collapsed', animate(animation, collapsedSidebarStyle)),
  transition('collapsed => expanded', animate(animation, expandedSidebarStyle)),
]);

export const slideSidebarPadding = trigger('slideSidebarPadding', [
  state('hidden', hiddenSidebarPageStyle),
  state('unpinned', unpinnedSidebarPageStyle, options),
  state('pinned', pinnedSidebarPageStyle, options),
  transition('hidden <=> unpinned', animate(animation)),
  transition('hidden <=> pinned', animate(animation)),
  transition('unpinned <=> pinned', animate(animation)),
]);

export const expandSearchInput = trigger('toggleAnimation', [
  state('collapsed', style({
    width: '0',
    opacity: '0'
  })),
  state('expanded', style({
    width: '250px',
    opacity: '1'
  })),
  transition('* => collapsed', group([
    animate('300ms ease-in-out', style({
      width: '30px'
    })),
    animate('300ms ease-in', style({
      opacity: '0'
    }))
  ])),
  transition('* => expanded', group([
    animate('300ms ease-out', style({
      opacity: '1'
    })),
    animate('300ms ease-in-out', style({
      width: '250px'
    }))
  ]))
]);