Анимация перехода в угловом приложении не работает в EDGE - PullRequest
Новая
       35

Анимация перехода в угловом приложении не работает в EDGE

0 голосов
/ 16 января 2019

У меня есть простая анимация, которая используется, когда приложение перемещается через маршрутизатор к другому компоненту. 

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. Это угловое 7 приложение, и оно отлично работает в Chrome.
  2. анимация не работает в MS Edge
  3. компонент никогда не добавляется в DOM, но выполняются службы в файле component.ts

У меня такое ощущение, что это связано со стилем transform: translateY (200%) для анимации, но я не уверен, как это отладить.

Может кто-нибудь помочь мне понять, почему мои анимации не работают в MS Edge.

Почему это не повторяющийся вопрос

На все остальные подобные вопросы по SO добавлен polyfill для веб-анимации в качестве решения. Я уже сделал это, и он все еще не работает.

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 17 января 2019

К сожалению, это была простая проблема CSS.

Все компоненты, отображаемые в выходе маршрутизатора, используют div для обертывания компонента.Мне нужно было добавить следующее:

позиция: исправлена;

После этого анимация работает.Так что это была не угловая проблема с анимацией, а проблема с CSS.

Надеюсь, это поможет кому-то еще

0 голосов
/ 17 января 2019

Пожалуйста, обратитесь к этой статье (она содержит некоторую демонстрацию, я тестировал ее в 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]': '' }
})

Кроме того, вы также можете проверить официальный документ, чтобы использовать Анимации перехода маршрута .

...