0

我正在尝试为我的应用程序中组件之间的更改设置动画。活动的应该从右边退出（:leave），新的应该从左边进入（:enter）。我已经设置了代码来做到这一点，但是进入的代码被渲染在离开的代码下方（动画工作），我猜这与它们被显示为块有关，但是当我删除那个样式时从主机属性，动画中断。现在已经挠了一个小时了，我真的很感激这方面的一些帮助。我的代码是：

@Component({
  (...)
  host: {
    '[@flyInOut]': 'true',
    'style': 'display: block;'
  },
  animations: [
    flyInOut()
  ]
})

export function flyInOut() {
    return trigger('flyInOut', [
        state('*', style({
            opacity: 1,
            transform: 'translateX(0)'
        })),
        transition(':enter', [
            style({
                transform: 'translateX(-100%)',
                opacity: 0
            }),
            animate('2000ms ease-in')
        ]),
        transition(':leave', [
            animate('2000ms ease-out', style({
                transform: 'translateX(100%)',
                opacity: 0
            }))
        ])
    ]);
}

我正在从单独的文件中导入动画，并且故意将时间设置为高以进行调试。感谢任何能够提供帮助的人！

4

0 回答 0