[duoyun-ui, gem] unified animation

[mantou132]

• modal/drawer: js close, css open+close 。 滑入+渐显
• wait: js open+close 。渐显

特殊动画

• collapse: js
• carousel: css
• coach-mark: css
• toast: css
• loading: css

animations 模块应该能改序列化成 css 动画，以达到用 animation 统一处理 js 和 css 动画

[mantou132]

序列化 js animation：

.animate {
  animation: ${convertToCSSAnimation};
}

.animate {
  animation: showMask 0.15s ease forwards;
  @keyframes showMask {
      from {
        opacity: 0;
      }
    }
}

只序列化 frames:

const animations = createCSSSheet({
  showMask: styled.keyframes(frames),
});

[mantou132]

type PropertyKeyframes = {
  [key in keyof CSSStyleDeclaration]?: string | string[] | number | null | (number | null)[];
};

declare global {
  interface PropertyIndexedKeyframes extends PropertyKeyframes {}
}

export const fadeIn: PropertyIndexedKeyframes = { opacity: [0, 1] };
export const fadeOut: PropertyIndexedKeyframes = { opacity: [1, 0] };

export function convertToCSSKeyframes(keyframes: Keyframe[] | PropertyIndexedKeyframes) {
  return '';
}