1

我在 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. 当组件初始化时，也就是当我到达适当的路线时 2. 当我离开那条路线并导航到另一条路线时

第一种情况完美无缺，但第二种情况却没有。我在这里错过了什么/做错了什么？

4

1 回答 1

2

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

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的风格来让你的组件脱离页面的正常流程。

希望这可以帮助。

于 2017-09-17T16:28:46.353 回答