Edge & IE не учитывает переполнение-y в угловой анимации - PullRequest
Новая
       12

Edge & IE не учитывает переполнение-y в угловой анимации

1 голос
/ 17 мая 2019

Я сделал следующую угловую анимацию для своего приложения, чтобы иметь возможность вертикально разворачивать / сворачивать элементы.Это работает, но кажется, что Edge и IE не применяют overflow-y во время анимации, из-за чего все выглядит шатко. 

import { trigger, transition, style, animate, state } from '@angular/animations';

export const expandCollapseAnimation = trigger('expandCollapse', [
    state('*', style({
        height: '*',
    })),
    state('void', style({
        height: '0',
        'overflow-y': 'hidden',
    })),
    //Same transition duration/easing when entering or leaving
    transition('* => *', animate(`300ms cubic-bezier(0.4, 0, 0.2, 1)`))
]);

Вот как это выглядит в Chrome, где overflow-y правильно применяется

А вот как это выглядит в Edge и IE, где вместо этого «всплывает» содержимое.

Что я могу сделать, чтобы это исправить?

И да, я установил и добавил web-animations-js в мой файл Polyfills, и это ничего не изменило

1 Ответ

1 голос
/ 20 мая 2019

Это немного обходной путь, но он по крайней мере создаст похожую анимацию в IE / Edge.Он похож, но не идентичен, и у него нет проблем с переполнением.

получается, что это угловая проблема.он пытается перевести код анимации в CSS @keyframes для браузера, который не поддерживает WebAnimations, а свойство overflow-y, похоже, не переводится должным образом.

Поскольку мы знаем, что не поддерживается,мы можем определить поддержку API и указать, какую анимацию использовать, основываясь на этом.Строка 'animate' in document.documentElement сообщит нам, поддерживается ли WebAnimations или нет.

Вот полный код: 

import { trigger, transition, style, animate, state, AnimationMetadata } from '@angular/animations';
import { defaultDuration, defaultEasing } from './animation-variables';

//Angular does not properly translate a WebAnimation with `overflow-y` into a CSS Animation, this it overflows it's container.
//So we use an entirely different animation for these browsers.  It will still overflow, but the added opacity transition makes it less obvious

const animForWebAnimations: AnimationMetadata[] = [
    state('*', style({
        height: '*',
    })),
    state('void', style({
        height: '0',
        'overflow-y': 'hidden',
    })),
    //Same transition duration/easing when entering or leaving
    transition('* => *', animate(`${defaultDuration}ms ${defaultEasing}`))
];

const animForCssAnimations: AnimationMetadata[] = [
    state('*', style({
        height: '*',
        'transform-origin': 'center 0',
        transform: 'scaleY(1)'
    })),
    state('void', style({
        height: '0px',
        'transform-origin': 'center 0',
        transform: 'scaleY(0)'
    })),
    transition('* => *', animate(`${defaultDuration}ms ${defaultEasing}`))
];

const expandCollapseAnimationMetadata = 'animate' in document.documentElement ? animForWebAnimations : animForCssAnimations;
export const expandCollapseAnimation = trigger('expandCollapse', expandCollapseAnimationMetadata);

Для Chrome / Firefox и других «хороших» браузеров анимация выглядитто же, что и выше в моем вопросе, но теперь это выглядит так в IE / Edge

...