如何使用usspring制作不同的持续时间?

Question

我希望我的组件有一个动画，如果我的鼠标进入，它将在0.3秒内完全显示，如果我的鼠标离开，它将在0.1秒内消失。但是，像下面的代码一样，usspring只能定义一个持续时间，这将导致组件在0.3秒内全部显示和消失。如何定义from->to和to->from的不同持续时间?谢谢所有能帮忙的人。

const animationStyle = useSpring({
bottom: show ? 0 : -71,
from: {
bottom: -71
},
config: { duration: 300 }
})

Answer 1

像这样

import import React, { useState } from 'react';
import { animated, useSpring } from '@react-spring/web';
const SuspendedComponent: React.FC = ({ children }) => {
const [isMouseEnter, setMouseEnter] = useState<boolean>(false);
const _style = useSpring({
bottom: isMouseEnter ? 0 : -71,
from: {
bottom: -71,
},
config: { duration: 300 },
});
function onMouseHandler(isEnter: boolean) {
setMouseEnter(isEnter);
}
return (
<div
style={{ display: 'block', width: '100px', height: '100px' }}
onMouseEnter={() => onMouseHandler(true)}
onMouseLeave={() => onMouseHandler(false)}
>
{isMouseEnter && <animated.div style={_style}>{children}</animated.div>}
</div>
);
};
export default SuspendedComponent;

可以通过onMouseEnter和onMouseLeave事件控制animated.div元素的显示。