帧器运动 - 使用控件更改状态后动画不会启动

Question

我为图像滑块制作了自定义点，通常效果很好。这些点触发图像滑块动画，但当幻灯片悬停时，我现在必须暂停这些点。我的问题是，第一个点在第一次加载时动画化，然后它什么都不做，直到我悬停在幻灯片上，它会继续，然后再次停止。

如果没有控制，它们会完美工作。

我不确定我的组件有什么问题。

这里有一个代码沙盒来演示这个问题。

export const TimerDots = ({
pauseDots,
amount,
duration,
handleChange,
activeIndex
}: {
pauseDots?: boolean;
amount: number;
duration: number;
handleChange: (e: any) => void;
activeIndex: number;
}) => {
const controls = useAnimation();
const handleNextSlide = () => {
handleChange((activeIndex += 1));
};
const startAnimation = controls.start({
width: SIZE * 3,
transition: {
duration: duration,
type: "tween",
ease: "easeOut"
}
});
useEffect(() => {
startAnimation;
if (pauseDots) {
controls.stop();
}
}, [pauseDots, activeIndex]);
return (
<DotContainer amount={amount}>
{[...Array.from({ length: amount })].map((_, index) => {
return (
<Dot
layout
key={index}
onClick={() => handleChange(index)}
$active={activeIndex === index}
>
{activeIndex === index && (
<Timer
layout
animate={controls}
onAnimationComplete={handleNextSlide}
/>
)}
</Dot>
);
})}
</DotContainer>
);
};

Answer 1

问题来自startAnimation及其在useEffect 中的使用

在useEffect中执行startAnimation时，不会调用函数controls.start(..)。

试试这个：

const startAnimation = () => {
controls.start({
width: SIZE * 3,
transition: {
duration: duration,
type: "tween",
ease: "easeOut"
}
});
};
useEffect(() => {
startAnimation();
if (pauseDots) {
controls.stop();
}
}, [pauseDots, activeIndex, controls]);

CodeSandbox。