Angular 4 动画不会在路线改变时触发

Question

我在我的 Angular 4 项目中创建了以下动画：

import { trigger, state, style, transition, animate } from '@angular/animations';

export function slide() {
    return trigger('slide', [
            transition('void => *', [
                style({opacity: 0}),
                style({transform: 'translateX(100%)'}),
                animate('1s ease-in-out', style({transform: 'translateX(0%)', opacity: 1}))
            ]),
            transition('* => void', [
                style({opacity: 0}),
                style({transform: 'translateX(100%)'}),
                animate('1s 2s ease-in-out', style({transform: 'translateX(0%)', opacity: 1}))
            ])
        ])
  }

我已使用 @Component 装饰器的 host 属性将动画附加到我的组件。

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  animations: [slide()],
  host: {'[@slide]': '', 'style': 'display: block;'}
})

现在，我希望动画在两个点触发： 1.组件初始化的时候，a.k.a当我打到合适的路由 2. 当我离开那条路线并导航到另一条路线时

第一种情况完美无缺，但第二种情况则不然。我missing/doing哪里错了？

Answer 1

经过反复试验，我设法得到了与您的动画类似的东西。

export function slideLeft() {
    return slide();
}

function slide() {
    return trigger('slide', [
        state('void', style({position:'absolute', width:'100%'}) ),
        state('*', style({position:'absolute', width:'100%'}) ),
        transition('void => *', [
            style({transform: 'translateX(100%)', opacity: 0 }),
            animate('1s ease-in-out', style({transform: 'translateX(0%)', opacity: 1 }))
        ]),
        transition('* => void', [
            style({transform: 'translateX(0%)', opacity: 1 }),
            animate('1s ease-in-out', style({transform: 'translateX(-100%)', opacity: 0 }))
        ])
    ]);
}

这是我的动画代码。

@Component({
  selector: 'app-away',
  templateUrl: './away.component.html',
  styleUrls: ['./away.component.css'],
  animations: [ slideLeft() ],
  host: { '[@slide]': '' }
})

这就是我将它应用到组件的方式。

对于离开动画，您使用了与进入动画完全相同的属性。您想要的是要设置动画的组件在离开时从 0% 移动到 -100%。

我还添加了一些 state 辅助函数，它们应用 position: absolute 的样式来使您的组件脱离正常流程页面的。

希望对您有所帮助。

Angular 4 动画不会在路线改变时触发

Angular 4 Animation won't trigger on route change

angular

animation

angular-animations