मेरे पास एक गति मान है जिसे अद्यतन किया जाता है जब भी कोई घटक होवर किया जा रहा हो। मैंने सोचा था कि फ्रैमर-मोशन स्वचालित रूप से अपने नए राज्य के मूल्य को एनिमेट करने का ख्याल रखता है लेकिन जाहिर तौर पर ऐसा नहीं होता है। मैं अपने गति मूल्य के नए मूल्यों को कैसे परिवर्तित कर सकता हूं? यह भी ध्यान रखना महत्वपूर्ण है कि मैं उस समय के होवर प्रोप से अवगत हूं जो मौजूद है लेकिन मैं इसे यहां उपयोग नहीं करना चाहता हूं। यह उदाहरण घटक मेरी स्थिति को दिखाता है:

const Component = () => {
    const scale = useMotionValue(defaultScale);

    return (
        <motion.img
        style={{ scale }}
        onMouseEnter={ () => scale.set(1.35) }
        onMouseLeave={ () => scale.set(defaultScale) }
        />
    )
} 
1
Kasper Östberg 26 सितंबर 2020, 16:03

1 उत्तर

सबसे बढ़िया उत्तर

क्या आपने useSpring की कोशिश की है?

const Component = () => {
  const scale = useSpring(1);

  return (
    <motion.div
      style={{ scale, background: "tomato", width: "100px", height: "100px" }}
      onMouseEnter={() => scale.set(1.35)}
      onMouseLeave={() => scale.set(1)}
    />
  );
};

दस्तावेज़: https://www.framer.com/api/motion/motionvalue/# यूज़स्प्रिंग

या आप कस्टम नियंत्रण और ट्रांज़िशन बनाने के लिए useAnimation का भी उपयोग कर सकते हैं:

const Component2 = () => {
  const controls = useAnimation();

  return (
    <motion.div
      style={{ background: "blue", width: "100px", height: "100px" }}
      animate={controls}
      onMouseEnter={() => controls.start({ scale: 1.35 })}
      onMouseLeave={() => controls.start({ scale: 1 })}
    />
  );
};

दस्तावेज़: https://www.framer.com/api/motion/animation /#एनिमेशन-नियंत्रण

दोनों उदाहरणों के साथ कोडसैंडबॉक्स: https://codesandbox.io/s/ httpsstackoverflowcomप्रश्न64077992-j63qv?file=/src/App.js

1
Danila 27 सितंबर 2020, 16:27