Edge＆IE不尊重角度动画中的溢出-y

Question

我为我的应用制作了以下角度动画，以便能够垂直扩展/折叠元素。它可以工作，但是在动画过程中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问题。它将尝试为不支持@keyframes的浏览器将动画代码转换为CSS 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中看起来像这样

Answer 2

我一直面临着同样的问题，并且找到了一种非常不错的解决方法。 Angular在运行角度动画时会应用一个类。因此，您可以将隐藏的溢出添加到该类中，如以下简单示例所示：

.acrodion-content.ng-animating {
  oveflow:hidden;
}

<div class="accordion-item">
  <div class="accordion-item-header">One</div>
  <div class="accordion-content" [@expandCollapse] *ngIf="expanded">
    lorem ipsum dolor sit amet.
  </div>
</div>