如何在Framer Motion中让SVG的pathLength完全动画至0？

问题根源在于strokeLinecap="round"属性：当pathLength动画到0时，SVG会为路径起点渲染一个与描边宽度一致的圆形端点，导致残留圆点。

只需给动画同步加上透明度变化，就能让路径在长度缩为0的同时完全透明，彻底消除残留点：

修改motion.path的animate配置，添加opacity属性：

<motion.path
  initial={{ pathLength: 1, opacity: 1 }}
  animate={{ 
    pathLength: showPassword ? 0 : 1,
    opacity: showPassword ? 0 : 1 // 同步透明度动画
  }}
  exit={{ pathLength: 1, opacity: 1 }}
  transition={{ duration: 0.2, ease: "easeInOut" }}
  strokeLinecap="round"
  strokeLinejoin="round"
  d="M3 3L21 21"
/>

动画过程中路径会随长度缩短逐渐透明，最终完全消失，视觉效果流畅自然。

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