TypeScript core.transition函數代碼示例

本文整理匯總了TypeScript中@angular/core.transition函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript transition函數的具體用法？TypeScript transition怎麽用？TypeScript transition使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。

在下文中一共展示了transition函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: slideAndFade

export function slideAndFade() {
  return trigger('slideAndFade', [
    state('*', style({
      opacity: '0',
      'pointer-events': 'none'
    })),
    state('active', style({
      opacity: '1',
      'pointer-events': 'initial'
    })),
    state('disabled', style({
      opacity: '1',
      'pointer-events': 'initial'
    })),
    transition('* => active', [
      style({
        opacity: '1',
        transform: 'translateX(100%)'
      }),
      animate('250ms ease-in', style({transform: 'translateX(0%)'}))
    ]),
    transition('active => *', [
      style({
        opacity: '1',
        transform: 'translateX(0%)'
      }),
      animate('200ms ease-in', style({opacity: '0'}))
    ])
  ]);
}

開發者ID:mdharamadas1，項目名稱:admiral，代碼行數:30，代碼來源:transitions.ts

示例2: fallIn

export function fallIn() {
  return trigger('fallIn', [
    transition(':enter', [
      style({opacity:'0', transform: 'translateY(40px)'}),
      animate('.4s .2s ease-in-out', style({opacity:'1', transform: 'translateY(0)'}))
    ]),
    transition(':leave', [
      style({opacity:'1', transform: 'translateX(0)'}),
      animate('.3s ease-in-out', style({opacity:'0', transform: 'translateX(-200px)'}))
    ])
  ]);
}

開發者ID:devstar217，項目名稱:authentication-angular，代碼行數:12，代碼來源:router.animations.ts

示例3: slideToTop

function slideToTop() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%', height:'100%'}) ),
    state('*', style({position:'fixed', width:'100%', height:'100%'}) ),
    transition(':enter', [
      style({transform: 'translateY(100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateY(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateY(-100%)'}))
    ])
  ]);
}

開發者ID:claudiutomescu-dh，項目名稱:Angular2-JumpStart，代碼行數:14，代碼來源:router.animations.ts

示例4: slideToLeft

function slideToLeft() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'40%'}) ),
    state('*', style({position:'fixed', width:'0%'}) ),
    transition(':enter', [
      style({transform: 'translateX(40%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-40%)'}))
    ])
  ]);
}

開發者ID:claudiutomescu-dh，項目名稱:Angular2-JumpStart，代碼行數:14，代碼來源:router.animations.ts

示例5: moveIn

export function moveIn() {
  return trigger('moveIn', [
    state('void', style({position: 'fixed', width: '100%'}) ),
    state('*', style({position: 'fixed', width: '100%'}) ),
    transition(':enter', [
      style({opacity:'0', transform: 'translateX(100px)'}),
      animate('.6s ease-in-out', style({opacity:'1', transform: 'translateX(0)'}))
    ]),
    transition(':leave', [
      style({opacity:'1', transform: 'translateX(0)'}),
      animate('.3s ease-in-out', style({opacity:'0', transform: 'translateX(-200px)'}))
    ])
  ]);
}

開發者ID:devstar217，項目名稱:authentication-angular，代碼行數:14，代碼來源:router.animations.ts

示例6: moveInLeft

export function moveInLeft() {
  return trigger('moveInLeft', [
    transition(':enter', [
      style({opacity:'0', transform: 'translateX(-100px)'}),
      animate('.6s .2s ease-in-out', style({opacity:'1', transform: 'translateX(0)'}))
    ])
  ]);
}

開發者ID:devstar217，項目名稱:authentication-angular，代碼行數:8，代碼來源:router.animations.ts

示例7: routerTransition

export function routerTransition() {
  return trigger('routerTransition', [
    state('void', style({
      background: 'rgba(0, 0, 0, 0.7)',
      visibility: 'hidden',
      opacity: '0',
      'z-index': '2000'
    })),
    state('*', style({
      visibility: 'visible',
      opacity: '1',
      'z-index': '2000'
    })),
    transition(':leave', animate('500ms')),
    transition(':enter', animate('500ms'))
])
}

開發者ID:vincent314，項目名稱:jsrol-ng2，代碼行數:17，代碼來源:router.animation.ts

示例8: routerTransition

export function routerTransition() {
    return trigger('routerTransition', [
        transition('void => *', [
            style({ transform: 'translateX(-10%)' }),
            animate(400)
        ])
    ]);
}

開發者ID:rakeshrohan，項目名稱:QRecruitment，代碼行數:8，代碼來源:router.animations.ts

示例9: slideFromUp

export function slideFromUp() {
  return trigger('routerTransition', [
    state('void', style({'margin-top': '10px', opacity: '0'})),
    state('*', style({'margin-top': '0px', opacity: '1'})),
    transition(':enter', [
      animate('0.3s ease-out', style({opacity: '1', 'margin-top': '0px'}))
    ])
  ]);
}

開發者ID:idrayv，項目名稱:WatchWord，代碼行數:9，代碼來源:routerTransition.ts

示例10: slideFromBottom

export function slideFromBottom() {
  return trigger('routerTransition', [
    state('void', style({'padding-top': '20px', opacity: '0'})),
    state('*', style({'padding-top': '0px', opacity: '1'})),
    transition(':enter', [
      animate('0.33s ease-out', style({opacity: '1', 'padding-top': '0px'}))
    ])
  ]);
}

開發者ID:idrayv，項目名稱:WatchWord，代碼行數:9，代碼來源:routerTransition.ts

注：本文中的@angular/core.transition函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。