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

Angular 2 - Add animation handler directly on the selector

本文关键字：添加 动画 处理 程序 选择器 Angular      更新时间：2023-09-26

在所有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 })
            ]))
        ])
    ])
   ]
})

我想我会分享这一点，但我已经设法使动画触发主机元素。

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

@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 ] ":"可见性"},

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