TypeScript core.state函数代码示例

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

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

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

在下文中一共展示了state函数的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: 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

示例3: 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

示例4: fadeIn

export function fadeIn():any {
    
    return trigger('openClose', [
      state('closed, void',
        style({ opacity: "0" })),
      state('opened',
        style({ opacity: "1" })),
      transition("closed <=> opened", [
        animate(200)
      ])
    ]);
    
}

开发者ID:hguerrerojaime，项目名称:bong2，代码行数:13，代码来源:animation.utils.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: 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

示例7: 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

示例8: 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

示例9: rotateInOut

function rotateInOut() {
  return trigger('routerTransition', [
    state('void', style({
      opacity: 0
    })),
    state('*', style({
      opacity: 1
    })),
    transition(':enter', [
      // Note: delay the 'enter' animation, so that the previous route's 'leave' animation has time to complete
      animate('0.5s 0.5s ease-in-out', style({
        opacity: 1
      }))
    ]),
    transition(':leave', [
      animate('0.5s ease-in-out', style({
        opacity: 0
      }))
    ])
  ]);
}

开发者ID:nmarsden，项目名称:make-em-green，代码行数:21，代码来源:app.routes.animations.ts

示例10: Collapse

export function Collapse(duration: number = 300) {
    return trigger('collapse', [
            state('collapsed, true, void', style({
                height: '0',
                opacity: '0',
                overflow: 'hidden'
            })),
            state('expanded, false', style({
                height: '*',
                opacity: '1',
                overflow: 'hidden'
            })),
            transition('true => false, collapsed => expanded', [
                animate(duration+'ms ease', keyframes([
                    style({opacity: '1'}),
                    style({height: '*'})
                ]))
            ]),
            transition('false => true, expanded => collapsed', [
                animate(duration+'ms ease', style({height: '0'}))
            ])
        ])
}

开发者ID:Bcpoole，项目名称:fuel-ui，代码行数:23，代码来源:Collapse.ts

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