如何通过点击按钮触发Framer Motion的用户卡片滑入动画？

要把页面渲染时自动触发的动画改成点击按钮触发，只需用React状态控制动画启动时机，具体操作如下：

• 在组件中引入useState钩子，创建状态变量管控动画状态
• 将motion.div的animate属性从固定值改为由状态控制
• 在按钮点击事件中更新状态，触发动画

修改后的完整代码示例：

import { useState } from 'react';
import { motion } from 'framer-motion';

const wrapperVariants = {
  hidden: { 
    opacity: 0, 
    x: '100vw' 
  },
  visible: { 
    opacity: 1, 
    x: 0,
    transition: { type: 'spring', delay: 0.1 }
  },
  exit: {
    x: "-100vh",
    transition: { ease: 'easeInOut' }
  }
};

const YourComponent = () => {
  // 初始状态设为未触发动画
  const [isCardVisible, setIsCardVisible] = useState(false);

  return (
    <>
      <motion.div
        variants={wrapperVariants}
        initial="hidden"
        // 用状态决定动画目标状态
        animate={isCardVisible ? "visible" : "hidden"}
        exit="exit"
      >
        <UserCard />
      </motion.div>

      <button onClick={() => setIsCardVisible(true)}>
        触发卡片滑入动画
      </button>
    </>
  );
};

如果需要支持重复触发动画（比如点击按钮让卡片重新滑入），可以调整状态逻辑，先重置为隐藏状态再触发显示：

<button onClick={() => {
  // 先重置到初始位置，再触发滑入
  setIsCardVisible(false);
  setTimeout(() => setIsCardVisible(true), 50);
}}>
  重新触发动画
</button>

内容的提问来源于stack exchange，提问作者Otis