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

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

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

在下面的示例中，

[@visibility]=“visibility”

位于

div

标记上，但我希望它位于

选择器：“vps节点”

上，因此我的模板只是

，没有父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 })
            ]))
        ])
    ])
   ]
})

@组件({
选择器：“vps节点”，
模板：``，
动画：[
触发器（'可见性'[
状态（'in'，样式（{transform:'translateX（0）}）），
转换（'void=>*'[
设置动画（300，关键帧）([
样式（{opacity:0，transform:'translateX（-100%）'，偏移量：0}），
样式（{opacity:1，transform:'translateX（15px）”，偏移量：0.3}），
样式（{opacity:1，transform:'translateX（0）”，偏移量：1.0}）
]))
]),
转换（'*=>void'[
设置动画（300，关键帧）([
样式（{opacity:1，transform:'translateX（0）”，偏移量：0}），
样式（{opacity:1，transform:'translateX（-15px）'，偏移量：0.7}），
样式（{opacity:0，transform:'translateX（100%）'，偏移量：1.0}）
]))
])
])
]
})

我想与大家分享这一点，但我成功地在宿主元素上触发了动画

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

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

---

结果显示host:属性需要放在括号中

主机：{'[@visibility]'：'visibility'}

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

选择器：“vps行节点”，
主机：{'[@visibility]:'visibility'}，
模板：``，
动画：[……]

您是否在

@组件上尝试了
主机
属性？比如：
主机：{'@visibility'：'visibility'}
？是的，似乎没有触发动画。很遗憾，它正常工作了，请参阅我的答案。谢谢所有的提示！