角4动画将不会在路由变化触发

Question

我创建了下面的动画在我的角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.当组件被初始化，又名当我打的适当途径 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％。

我还添加了一些状态辅助功能，适用的位置样式：绝对把你的组件出页面的正常流动。

希望这会有所帮助。