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

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

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

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

第一种情况完美无瑕，但第二种情况并非如此。我在这里错过了什么/做错了什么？

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％。

我还添加了一些状态辅助函数，这些函数使用 position：absolute 样式将您的组件从正常的页面流中移除。

希望这有帮助。

Angular 4动画不会触发路线更改

1 个答案: