javascript - Angular 2 - 直接在选择器上添加动画处理程序

Question

在所有 Angular 2 API 动画示例中，动画处理程序都是在 innerHtml 上实现的，

我想将它直接放在组件选择器上。

在下面的示例中，[@visibility]="visibility"位于 div标签，但我想把它放在 selector: 'vps-node' 上所以我的模板很简单 <ng-content>没有父 div 标签

@Component({
selector: 'vps-node',
template: `<div [@visibility]="visibility"><ng-content></ng-content></div>`,
animations: [
    trigger('visibility', [
        state('in', style({ transform: 'translateX(0)' })),
        transition('void => *', [
            animate(300, keyframes([
                style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(15px)', offset: 0.3 }),
                style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 })
            ]))
        ]),
        transition('* => void', [
            animate(300, keyframes([
                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }),
                style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
            ]))
        ])
    ])
   ]
})

Answer 1

我想分享这个，但我已经设法在宿主元素上触发动画。

检查以下我处理页面转换的代码。

@Component({
    selector: 'styles',
    templateUrl: './styles.template.html',
    host: {
        '(@routeAnimation.start)': 'pageEnterStarted($event)',
        '(@routeAnimation.done)': 'pageEnterCompleted($event)',
        '[@routeAnimation]': 'true',
    },
    animations: [
        trigger('routeAnimation', [
            state('*', style({ opacity: 1})),
            transition('void => *', [
                style({ opacity: 0}),
                animate(250)
            ]),
            transition('* => void', animate(250, style({opacity: 0})))
        ])
    ]
})
export class StylesComponent {
     pageEnterStarted() {
     }

     pageEnterCompleted() {
     }
}