diff --git a/components/_util/openAnimation.tsx b/components/_util/openAnimation.tsx index f2a33ba216..8f117c17e6 100644 --- a/components/_util/openAnimation.tsx +++ b/components/_util/openAnimation.tsx @@ -1,4 +1,5 @@ import cssAnimation from 'css-animation'; +import getRequestAnimationFrame from './getRequestAnimationFrame'; function animate(node, show, done) { let height; @@ -6,16 +7,22 @@ function animate(node, show, done) { start() { if (!show) { node.style.height = `${node.offsetHeight}px`; + node.style.opacity = 1; } else { height = node.offsetHeight; node.style.height = 0; + node.style.opacity = 0; } }, active() { - node.style.height = `${show ? height : 0}px`; + getRequestAnimationFrame()(() => { + node.style.height = `${show ? height : 0}px`; + node.style.opacity = show ? 1 : 0; + }); }, end() { node.style.height = ''; + node.style.opacity = ''; done(); }, }); diff --git a/components/collapse/index.tsx b/components/collapse/index.tsx index 6c02f9af9e..5c44a2e69d 100644 --- a/components/collapse/index.tsx +++ b/components/collapse/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import RcCollapse from 'rc-collapse'; import classNames from 'classnames'; +import animation from '../_util/openAnimation'; export interface CollapseProps { activeKey?: Array | string; @@ -30,6 +31,7 @@ export default class Collapse extends React.Component { static defaultProps = { prefixCls: 'ant-collapse', bordered: true, + openAnimation: { ...animation, appear() {} }, }; render() { diff --git a/components/style/core/motion.less b/components/style/core/motion.less index ac4887271d..4d52f540dc 100644 --- a/components/style/core/motion.less +++ b/components/style/core/motion.less @@ -10,6 +10,6 @@ .ant-motion-collapse { overflow: hidden; &-active { - transition: height .24s ease-in; + transition: height .2s, opacity .2s; } }