有些组件需要一些简单的淡入淡出css动画效果 通过visible为触发点 主要就是在visible切换true/false的时候做出简单动画 enter类型和appear类型不让一起出现

CSS animation 与 CSS transition 有何区别？

https://www.zhihu.com/question/19749045

Transition 强调过渡，Transition ＋ Transform ＝ 两个关键帧的Animation
Animation 强调流程与控制，Duration ＋ TransformLib ＋ Control ＝ 多个关键帧的Animation
如果只有两个关键帧我会选择Transition ＋ Transform
[

](https://ant.design/components/alert-cn/)

rc-motion做的事情

实际功能例子

https://ant.design/components/alert-cn/

在css中已经预先写好各个动画的类名和动画名

// relative path
components/alert/style/index.less

  1. // transition
  2. .transition {
  3.   transition: background 0.3s, height 1.3s, opacity 1.3s;
  4.   // transition: all 5s!important;
  6.   &.transition-appear,
  7.   &.transition-enter {
  8.     opacity: 0;
  9.   }
  10.     ...
  11. }
  13. // animation
  14. .animation {
  15.   animation-duration: 1.3s;
  16.   animation-fill-mode: both;
  18.   &.animation-appear,
  19.   &.animation-enter {
  20.     animation-name: enter;
  21.     animation-fill-mode: both;
  22.     animation-play-state: paused;
  23.   }
  24.   ...
  25. }
  26. // keyframes
  27. @keyframes enter {
  28.   from {
  29.     transform: scale(0);
  30.     opacity: 0;
  31.   }
  32.   to {
  33.     transform: scale(1);
  34.     opacity: 1;
  35.   }
  36. }

通过控制status来获取对应钩子，可产生对应的样式或者执行用户自定义操作,控制类名添加和删除

用户各个阶段传入的钩子

  1. // 动画状态
  2. export const STATUS_NONE = 'none' as const;
  3. export const STATUS_APPEAR = 'appear' as const;
  4. export const STATUS_ENTER = 'enter' as const;
  5. export const STATUS_LEAVE = 'leave' as const;
  7. // visible变化 判断属于哪个status
  8.   useIsomorphicLayoutEffect(() => {
  10.     let nextStatus: MotionStatus;
  11.     if (!isMounted && visible && motionAppear) {
  12.       nextStatus = STATUS_APPEAR;
  13.     }
  14.     if (isMounted && visible && motionEnter) {
  15.       nextStatus = STATUS_ENTER;
  16.     }
  17.     if (
  18.       (isMounted && !visible && motionLeave) ||
  19.       (!isMounted && motionLeaveImmediately && !visible && motionLeave)
  20.     ) {
  21.       nextStatus = STATUS_LEAVE;
  22.     }
  23.     if (nextStatus) {
  24.       setStatus(nextStatus);
  25.       startStep();
  26.     }
  27.   }, [visible]);
  29. // 通过status匹配钩子
  30. const eventHandlers = React.useMemo<{
  31.     [STEP_PREPARE]?: MotionPrepareEventHandler;
  32.     [STEP_START]?: MotionEventHandler;
  33.     [STEP_ACTIVE]?: MotionEventHandler;
  34.   }>(() => {
  35.     switch (status) {
  36.       case STATUS_APPEAR:
  37.         return {
  38.           [STEP_PREPARE]: onAppearPrepare,
  39.           [STEP_START]: onAppearStart,
  40.           [STEP_ACTIVE]: onAppearActive,
  41.         };
  43.       case STATUS_ENTER:
  44.         return {
  45.           [STEP_PREPARE]: onEnterPrepare,
  46.           [STEP_START]: onEnterStart,
  47.           [STEP_ACTIVE]: onEnterActive,
  48.         };
  50.       case STATUS_LEAVE:
  51.         return {
  52.           [STEP_PREPARE]: onLeavePrepare,
  53.           [STEP_START]: onLeaveStart,
  54.           [STEP_ACTIVE]: onLeaveActive,
  55.         };
  57.       default:
  58.         return {};
  59.     }
  60.   }, [status]);
  62. // 传入钩子返回值可作为最新样式
  63. onLeaveActive={() => { background: 'green' }}

step控制请求浏览器下一帧空闲执行动画且更新需要的动态样式
  1.   if (eventHandlers[STEP_PREPARE] && step === STEP_START) {
  2.     mergedStyle = {
  3.       transition: 'none',
  4.       ...mergedStyle,
  5.     };
  6.   }

useDomMotionEvents

绑定和解绑动画结束事件
一般都是用户只关心动画什么时候结束
为什么不用监听开始？

  1. // 动画名称 需要考虑兼容性
  2. animationend | transitionend
  4. // 绑定和解绑
  5. addEventListener
  6. removeEventListener

motion

  1. // 构建浏览器动画样式前缀 兼容性 作为事件监听名称的兼容
  2.   prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
  3.   prefixes[`Webkit${styleProp}`] = `webkit${eventName}`;
  4.   prefixes[`Moz${styleProp}`] = `moz${eventName}`;
  5.   prefixes[`ms${styleProp}`] = `MS${eventName}`;
  6.   prefixes[`O${styleProp}`] = `o${eventName.toLowerCase()}`;
  8. // 组合两个关键字
  9. animationend | transitionend