css - Angular 应用程序中的过渡动画在 EDGE 中不起作用

Question

我有一个简单的动画，当应用程序通过路由器导航到不同的组件时使用。

export function routerNavigation() {
  return trigger('routerNavigation', [
    state('void', style({ position: 'fixed' })),
    state('*', style({ position: 'fixed' })),
    transition(':enter', [
      style({ transform: 'translateY(200%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
    ]),
    transition(':leave', [
      style({ transform: 'translateX(0%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateX(150%)' }))
    ])
  ]);
}

并且动画被添加到组件中，如下所示:

@Component({
  selector: 'app-branch',
  templateUrl: './branch.component.html',
  styleUrls: ['./branch.component.scss'],
  animations: [routerNavigation()],
  host: { '[@routerNavigation]': '' }
})

我已经运行了:

npm install --save web-animations-js`

并且我已经取消注释 pollyfil.js 文件中的行:

import 'web-animations-js'; 

注意事项:

1. 这是一款 Angular 7 应用，在 Chrome 中运行良好。
2. 动画在 MS Edge 中不工作
3. 组件永远不会添加到 DOM，但会执行 components.ts 文件中的服务

我觉得这与动画的 transform: 'translateY(200%)' 样式有关，但我不确定如何调试它。

谁能帮我弄清楚为什么我的动画在 MS Edge 中不起作用。

为什么这不是重复的问题

SO 上的所有其他类似问题都添加了 polyfill for web animations 作为解决方案。我已经这样做了，但它仍然不起作用。

提前致谢

Answer 1

请引用this article (它包含一些演示，我已经在angular 7和IE、Edge和Chrome浏览器上测试过，它们都运行良好)，我建议你可以尝试使用以下代码来使用动画:

import {trigger, stagger, animate, style, group, query as q, transition, keyframes} from '@angular/animations';
const query = (s,a,o={optional:true})=>q(s,a,o);

export const branchTransition = trigger('branchTransition', [
  transition(':enter', [
    query('.block', style({ opacity: 0 })),
    query('.block', stagger(300, [
      style({ transform: 'translateY(100px)' }),
      animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(0px)', opacity: 1})),
    ])),
  ]),
  transition(':leave', [
    query('.block', stagger(300, [
      style({ transform: 'translateY(0px)', opacity: 1 }),
      animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(100px)', opacity: 0})),
    ])),        
  ])
]);

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

另外，你也可以查看官方文档使用Route transition animations .