组合滚动触发和悬停动画

Question

我正在使用滚动触发动画来淡出我的卡片元素。此外，我想包含一个悬停动画，但动画在悬停后会变回初始状态，这是卡片褪色之前的状态。

要触发滚动动画，我在这里使用这个组件

export const useScroll = (treshhold = .2) => {
const controls = useAnimation();
const [element, view] = useInView({ threshold: treshhold, triggerOnce: true });
if (view) {
controls.start('show');
} else {
controls.start('hidden');
}
return [element, controls];
}

要动画化的元素:

const [element, controls] = useScroll();
<StyledCard onClick={openCardHandler} style={style} layoutId={content.id} ref={element} variants={popup} initial="hidden" animate={controls} whileHover="hover">

动画是这样的

export const popup = {
hidden: {
opacity: 0,
scale: .5
},
show: {
opacity: 1,
scale: 1,
transition: {
duration: .75
}
},
hover: {
scale: 1.2
}
}

为什么动画状态在悬停后跳回初始状态而不显示?

Answer 1

我刚发现问题。从元素中移除初始状态属性，它可以工作了。