angular - Edge 和 IE 不遵守 Angular 动画中的 overflow-y

Question

我为我的应用程序制作了以下 Angular 动画，以便能够垂直展开/折叠元素。它有效，但 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 文件中，这并没有改变任何东西

Answer 1

这是一种变通方法，但它至少会在 IE/Edge 中制作类似的动画。它很相似，但不完全相同，并且没有任何溢出问题。

原来这是一个 Angular 的问题。对于不支持 WebAnimations 的浏览器，它会尝试将动画代码转换为 CSS @keyframes 并且 overflow-y 属性似乎不支持正确翻译。

因为我们知道不支持什么，所以我们可以检测对 API 的支持并根据它切换使用哪个动画。 document.documentElement 中的 'animate' 行将告诉我们是否支持 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 中看起来像这样