我为我的应用程序制作了以下 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 文件中,这并没有改变任何东西
最佳答案
这是一种变通方法,但它至少会在 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 中看起来像这样
关于angular - Edge 和 IE 不遵守 Angular 动画中的 overflow-y,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56192635/