How to make different durations with useSpring?

Question

I want my component to have an animation that if my mouse enter,it will be fully displayed in 0.3s,and if my mouse leave,it will disappear in 0.1s.But useSpring can just define one duration just like the code below,which cause that the component will be displayed and disappear all in 0.3s.How can I define different duration for from->to and to->from?Thanks for anyone who can help.

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

score 0 · Answer 1 · answered Jul 05 '22 at 06:03

Like this

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;

You can control animated.div element display by onMouseEnter and onMouseLeave event.

How to make different durations with useSpring?

1 Answers1