Angular 4动画不会在路线更改时触发 [英] Angular 4 Animation won't trigger on route change

问题描述

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

I've created the following animation in my Angular 4 project:

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 属性。

I've attached the animation to my component using the host property of the @Component decorator.

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

现在，我希望动画会在两点触发：
1.初始化组件时，也就是当我点击适当的路线
2.当我离开该路线并导航到另一条路线时

Now, I'd expect the animation to trigger at two points: 1. When the component is initialized, a.k.a when I hit the appropriate route 2. When I leave that route and navigate to another one

第一种情况可以完美地工作，而第二种情况则没有。我在这里想念/做错了什么？

The first scenario works flawlessly, however the second one doesn't. What am I missing/doing wrong here?

推荐答案

经过反复试验，我设法获得了与动画相似的效果。

I managed to get something similar to your animation working after some trial and error.

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]': '' }
})

这就是我将其应用于组件的方式。

This is how I applied it to the component.

对于离开动画，您已经为进入动画使用了完全相同的属性。您想要的是您要动画处理的要在离开时从0％变为-100％的组件。

For the leaving animation, you have used the exact same properties for the entering animation. What you want is for the component you are animating to move from 0% to -100% on leaving.

我还添加了一些 state 帮助器函数，该函数采用 position：absolute 的样式，使您的组件脱离页面的正常流程。

I also added some state helper functions, which apply a style of position: absolute to take your component out of the normal flow of the page.

希望这会有所帮助。

这篇关于Angular 4动画不会在路线更改时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！