成幀器運動：發生過渡時是否 animation？

Question

我正在為切換按鈕使用簡單的過渡效果，與文檔非常相似，我的句柄是這樣的：

    <Handle
      animate
      layout
      isOn={isOn}
      transition={spring}
      variantColor={variantColor}
      onClick={() => setIsOn(!isOn)}
    />

我的手柄樣式：

const Handle = styled(motion.div)<{ isOn: boolean; variantColor: string }>(
  ({ isOn, theme, variantColor }) => ({
    width: theme.spacing(3),
    height: theme.spacing(3),
    position: 'absolute',
    left: isOn ? '65%' : '0%',
    backgroundColor: variantColor,
    borderRadius: 'inherit',
    cursor: 'pointer',
  }),
);

單擊時left屬性轉換，因此它在“65%”到“0%”之間切換。 我還想做的是添加一個縮放 animation，它使句柄變大然后回到原來的大小，同時left過渡生效。 所以如果我嘗試：

<Handle
  animate={{
    scale: [null, 1.2, 1],
    opacity: 1,
  }}
  layout
  isOn={isOn}
  transition={spring}
  variantColor={variantColor}
  onClick={() => setIsOn(!isOn)}
/>

頁面加載時發生縮放 animation，如何在轉換發生時觸發此 animation？ 請注意，縮放 animation 不關心isOn是真還是假，而不是從左到右移動句柄的轉換，反之亦然。 縮放 animation 完全相同，應該只發生在left過渡旁邊。

Answer 1

我發現一種方法是使用 framer 運動庫中的useAnimation鈎子。

import { motion, useAnimation } from 'framer-motion';

const control = useAnimation();

然后在 onClick 事件中使用它：

      onClick={() => {
        setIsOn(!isOn);
        control.start({
          scale: [null, 1.1, 1],
          transition: { duration: 0.2 },
        });
      }}