मेरे पास एक साधारण प्रतिक्रिया साइट है जो पेय-एपीआई से पेय प्रदर्शित करती है। यह मूल रूप से इस तरह काम करता है: जब उपयोगकर्ता button दबाता है, तो query अपडेट हो जाता है, fetchItems चलता है और आइटम इस तरह प्रदर्शित होते हैं

<Spring from={{ opacity: 0, marginTop: 100 }} to={{ opacity: 1, marginTop: 0 }} config={{ delay: 400 }}>
            {(props) => (
                <div style={props}>
                    {drinks
                        ? drinks.map((drink) => (
                              <DrinkCard
                                  title={drink.strDrink}
                                  image={drink.strDrinkThumb}
                                  alcohol={drink.strAlcoholic}
                                  category={drink.strCategory}
                              />
                          ))
                        : () => (
                              <div className="col-6 col-md-4 p-0">
                                  <h1>NO RESULTS</h1>
                              </div>
                          )}
                </div>
            )}
        </Spring>

अभी के लिए यह एनिमेशन केवल एक बार काम करता है जब पेज लोड होता है। मैं इसे प्रत्येक खोज पर चलाने के लिए कैसे बाध्य करूं?

0
ablaszkiewicz1 15 अप्रैल 2020, 19:28

1 उत्तर

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

आपको अपने Spring घटक में इस तरह रीसेट जोड़ना चाहिए:

  <Spring
    from={{ opacity: 0, marginTop: 100 }}
    to={{ opacity: 1, marginTop: 0 }}
    config={{ delay: 400 }}
    reset
  >

यहां एक उदाहरण दिया गया है: https:// codesandbox.io/s/dank-moon-sq7v9?file=/src/App.js:348-503

0
Peter Ambruzs 16 अप्रैल 2020, 06:24