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() {
     }
}

Answer 2

将host：属性放在括号中。

主持人：{' [ @visibility ] '：'visibility'}，

selector: 'vps-row-node',
host: { '[@visibility]': 'visibility' },
template: `<ng-content></ng-content>`,
animations: [...]

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

2 个答案: