TypeScript animations.animateChild函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@angular/animations.animateChild函数的典型用法代码示例。如果您正苦于以下问题：TypeScript animateChild函数的具体用法？TypeScript animateChild怎么用？TypeScript animateChild使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了animateChild函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: style

      'collapsed',
      style({
        height: '{{collapsedHeight}}',
      }),
      {
        params: { collapsedHeight: '48px' },
      },
    ),
    state(
      'expanded',
      style({
        height: '{{expandedHeight}}',
      }),
      {
        params: { expandedHeight: '56px' },
      },
    ),
    transition(
      'expanded <=> collapsed',
      group([query('@indicatorRotate', animateChild(), { optional: true }), animate(EXPANSION_PANEL_ANIMATION_TIMING)]),
    ),
  ]),

  /** Animation that expands and collapses the panel content. */
  bodyExpansion: trigger('bodyExpansion', [
    state('collapsed', style({ height: '0px', visibility: 'hidden' })),
    state('expanded', style({ height: '*', visibility: 'visible' })),
    transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ]),
};

开发者ID:bullhorn，项目名称:novo-elements，代码行数:30，代码来源:expansion-animations.ts

示例2: trigger

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

export const slideInLeftAnimation: AnimationTriggerMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        transform: 'translateX(0)',
      }),
    ),
    transition(':enter', [
      group([
        query('@*', animateChild(), { optional: true }),
        style({
          opacity: 0,
          transform: 'translateX(-100%)',
        }),
        animate('0.3s ease-in'),
      ]),
    ]),
    transition(':leave', [
      group([
        query('@*', animateChild(), { optional: true }),
        animate('0.5s ease-out', style({
          opacity: 0,
          transform: 'translateX(100%)',
        })),
      ]),
    ]),
  ]);
export const slideInDownAnimation: AnimationTriggerMetadata =

开发者ID:Teradata，项目名称:covalent，代码行数:31，代码来源:app.animations.ts

示例3: trigger

});

export const NavigationAnimation = [

  trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),

  trigger('animateStagger', [
    state('50', style('*')),
    state('100', style('*')),
    state('200', style('*')),

    transition('void => 50',
      query('@*',
        [
          stagger('50ms', [
            animateChild()
          ])
        ], {optional: true})),
    transition('void => 100',
      query('@*',
        [
          stagger('100ms', [
            animateChild()
          ])
        ], {optional: true})),
    transition('void => 200',
      query('@*',
        [
          stagger('200ms', [
            animateChild()
          ])

开发者ID:Yizongjishi，项目名称:angular-material-app，代码行数:31，代码来源:navigation.animation.ts

示例4: state

      transform: 'scaleY(0)',
      minWidth: '100%',
      opacity: 0
    })),
    state('showing', style({
      opacity: 1,
      minWidth: 'calc(100% + 32px)', // 32px = 2 * 16px padding
      transform: 'scaleY(1)'
    })),
    state('showing-multiple', style({
      opacity: 1,
      minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right
      transform: 'scaleY(1)'
    })),
    transition('void => *', group([
      query('@fadeInContent', animateChild()),
      animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
    ])),
    transition('* => void', [
      animate('250ms 100ms linear', style({opacity: 0}))
    ])
  ]),

  /**
   * This animation fades in the background color and text content of the
   * select's options. It is time delayed to occur 100ms after the overlay
   * panel has transformed in.
   */
  fadeInContent: trigger('fadeInContent', [
    state('showing', style({opacity: 1})),
    transition('void => showing', [

开发者ID:clydin，项目名称:material2，代码行数:31，代码来源:select-animations.ts

示例5: transition

    transition('expanded <=> collapsed, void => collapsed',
      animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ]),

  /** Animation that expands and collapses the panel header height. */
  expansionHeaderHeight: trigger('expansionHeight', [
    state('collapsed, void', style({
      height: '{{collapsedHeight}}',
    }), {
      params: {collapsedHeight: '48px'},
    }),
    state('expanded', style({
      height: '{{expandedHeight}}'
    }), {
      params: {expandedHeight: '64px'}
    }),
    transition('expanded <=> collapsed, void => collapsed', group([
      query('@indicatorRotate', animateChild(), {optional: true}),
      animate(EXPANSION_PANEL_ANIMATION_TIMING),
    ])),
  ]),

  /** Animation that expands and collapses the panel content. */
  bodyExpansion: trigger('bodyExpansion', [
    state('collapsed, void', style({height: '0px', visibility: 'hidden'})),
    state('expanded', style({height: '*', visibility: 'visible'})),
    transition('expanded <=> collapsed, void => collapsed',
      animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ])
};

开发者ID:Nodarii，项目名称:material2，代码行数:30，代码来源:expansion-animations.ts

示例6: trigger



// Routable animations
export const slideInAnimation =
  trigger('routeAnimation', [
    transition('heroes <=> hero', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%'})
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%'}))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%'}))
        ])
      ]),
      query(':enter', animateChild()),
    ])
  ]);

开发者ID:BobChao87，项目名称:angular，代码行数:28，代码来源:animations.ts

示例7: trigger

  trigger,
  AnimationTriggerMetadata,
  group,
  query,
  animateChild,
} from '@angular/animations';

/** Animations used by the Material datepicker. */
export const matDatepickerAnimations: {
  readonly transformPanel: AnimationTriggerMetadata;
  readonly fadeInCalendar: AnimationTriggerMetadata;
} = {
  /** Transforms the height of the datepicker's calendar. */
  transformPanel: trigger('transformPanel', [
    state('void', style({opacity: 0, transform: 'scale(1, 0)'})),
    state('enter', style({opacity: 1, transform: 'scale(1, 1)'})),
    transition('void => enter', group([
      query('@fadeInCalendar', animateChild()),
      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
    ])),
    transition('* => void', animate('100ms linear', style({opacity: 0})))
  ]),

  /** Fades in the content of the calendar. */
  fadeInCalendar: trigger('fadeInCalendar', [
    state('void', style({opacity: 0})),
    state('enter', style({opacity: 1})),
    transition('void => *', animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
  ])
};

开发者ID:OkBayat，项目名称:material2，代码行数:30，代码来源:datepicker-animations.ts

示例8: trigger

});

export const fuseAnimations = [

    trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),

    trigger('animateStagger', [
        state('50', style('*')),
        state('100', style('*')),
        state('200', style('*')),

        transition('void => 50',
            query('@*',
                [
                    stagger('50ms', [
                        animateChild()
                    ])
                ], {optional: true})),
        transition('void => 100',
            query('@*',
                [
                    stagger('100ms', [
                        animateChild()
                    ])
                ], {optional: true})),
        transition('void => 200',
            query('@*',
                [
                    stagger('200ms', [
                        animateChild()
                    ])

开发者ID:karthik12ui，项目名称:fuse-angular-full，代码行数:31，代码来源:index.ts

示例9: trigger

import { trigger, transition, query, style, stagger, animate, group, keyframes, animateChild, sequence } from '@angular/animations';

export const routerAnimation =
    trigger('routerAnimations', [
        transition('* <=> *', [
                query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
                sequence([
                    group([query(':leave', [animateChild()], { optional: true } )]),
                    group([  // block executes in parallel
                        query(':enter', group([
                        style({ transform: 'translateX(100%)' }),
                        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })) ]), { optional: true }),
                        query(':leave', group([ animateChild(),
                        style({ transform: 'translateX(0%)' }),
                        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
                        ]), { optional: true }),
                    ]),
                    group([query(':enter', [animateChild()], { optional: true } )]),
                    ])
        ])
    ]);

export const homeTransition =
trigger('homeTransition', [
    transition(':enter', [
      query('.block', style({ opacity: 0 })),
      query('.block', stagger(300, [
        style({ transform: 'translateY(100px)' }),
        animate('0.8s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(0px)', opacity: 1})),
      ])),
    ]),

开发者ID:aleksK22，项目名称:FitnessPro，代码行数:31，代码来源:router.animation.ts

示例10: trigger

 *
 * The values below match the implementation of the AngularJS Material mat-select animation.
 * @docs-private
 */
export const matSelectAnimations: {
  readonly transformPanelWrap: AnimationTriggerMetadata;
  readonly transformPanel: AnimationTriggerMetadata;
  readonly fadeInContent: AnimationTriggerMetadata;
} = {
  /**
   * This animation ensures the select's overlay panel animation (transformPanel) is called when
   * closing the select.
   * This is needed due to https://github.com/angular/angular/issues/23302
   */
  transformPanelWrap: trigger('transformPanelWrap', [
      transition('* => void', query('@transformPanel', [animateChild()],
          {optional: true}))
  ]),

  /**
   * This animation transforms the select's overlay panel on and off the page.
   *
   * When the panel is attached to the DOM, it expands its width by the amount of padding, scales it
   * up to 100% on the Y axis, fades in its border, and translates slightly up and to the
   * side to ensure the option text correctly overlaps the trigger text.
   *
   * When the panel is removed from the DOM, it simply fades out linearly.
   */
  transformPanel: trigger('transformPanel', [
    state('void', style({
      transform: 'scaleY(0.8)',

开发者ID:Nodarii，项目名称:material2，代码行数:31，代码来源:select-animations.ts

注：本文中的@angular/animations.animateChild函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。