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';

注意：

这是一个有角度的7应用程序，在chrome中可以正常工作。
动画在MS Edge中不起作用
该组件从不添加到DOM中，但执行components.ts文件中的服务

我感觉这与转换有关：动画的'translateY（200％）'样式，但是我不确定如何调试它。

有人可以帮我弄清楚为什么我的动画不能在MS Edge中工作。

为什么这不是重复的问题

关于SO的所有其他类似问题都添加了用于Web动画的polyfill作为解决方案。我已经做到了，但仍然行不通。

预先感谢

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。

Answer 2

不幸的是，这是一个简单的CSS问题。

路由器出口中呈现的所有组件均使用div包裹组件。我需要添加以下内容：

位置：固定；

此后，动画开始工作。因此，这不是一个有角度的动画问题，而是一个CSS问题。

希望这对其他人有帮助

Angular应用中的过渡动画在EDGE中不起作用

为什么这不是重复的问题

2 个答案: