时间戳

首页 > 解决方案 > Edge & IE 不尊重角度动画中的溢出-y

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

问题描述

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

标签： angularangular-animations

解决方案

这是一种解决方法，但它至少会在 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 中看起来像这样

推荐阅读