Блог

Главная - Вопросы по программированию - не удается заставить цепной эффект работать с useChain с помощью react-spring

не удается заставить цепной эффект работать с useChain с помощью react-spring

#reactjs #typescript #animation #react-spring

#reactjs #typescript #Анимация #react-spring

Вопрос:

Я новичок в использовании react-spring. В настоящее время (при написании веб-приложения react с помощью typescript) я пытаюсь применить цепочку useChain, объединяющую три useSpring, но у меня получается, что вся анимация начинается одновременно ….. но я полагаю, что у него должен быть эффект цепочки анимации (анимация выполняется одна за другой) … это будетбуду очень признателен, если кто-нибудь сможет дать мне несколько советов или поделиться опытом. Заранее спасибо.

Здесь, ниже, в первом разделе, я настраиваю кнопку для запуска анимаций с цепочкой useSpring. (на самом деле, если кто-то знает, я также обнаружил, что это не позволяет мне помещать только то, что я хотел изменить, в значения «кому» …. вместо этого, если я помещаю именно то, что я вставил в «от» до «кому»…как below…it отличается от того, что я узнал на домашней странице react-spring, что мне должно быть разрешено указывать в поле «кому» только то, что я хочу изменить из «от»)

 const [move, setMove] = useState(false)

    const text1Ref = useRef(null);
    const text2Ref = useRef(null);
    const text3Ref = useRef(null);

    const text1Style = useSpring({
       from: {zIndex: 1, left: "25%", top: "50%", transform: `translate(-50%,-50%)`},
       to: {zIndex: 1, left: "25%", top: "50%", transform: move? `translate(-50%,-20%)` : `translate(-50%,-50%)`},
       ref: text1Ref,
    })
   
    const text2Style = useSpring({
       from: {zIndex: 1, left: "50%", top: "50%", transform: `translate(-50%,-50%)`},
       to: {zIndex: 1, left: "50%", top: "50%", transform: move? `translate(-50%,-100%)` : `translate(-50%,-50%)`},
       ref: text2Ref,
    })

    const text3Style = useSpring({
        from: {zIndex: 1, left: "75%", top: "50%", transform: `translate(-50%,-50%)`},
        to: {zIndex: 1, left: "75%", top: "50%", transform: move? `translate(-50%,-30%)` : `translate(-50%,-50%)`},
        ref: text3Ref,
     })


useChain([text1Ref, text2Ref, text3Ref])

Я даже попытался поставить временные рамки следующим образом: following…it не показывает никакой задержки

 useChain([text1Ref, text2Ref, text3Ref], [0, 0.9))

здесь ниже приведены три раздела, которые я хотел бы «переместить вверх» или «переместить вниз» после нажатия кнопки в цепном эффекте.

 <animated.div style={text1Style} className="drawer" >Top 1</animated.div>
<animated.div style={text2Style} className="drawer" >Top 2</animated.div>
<animated.div style={text3Style} className="drawer" >Top 3</animated.div>

Я пытался обновиться до версии 9 раньше, но по некоторым причинам некоторые другие написанные анимации не работали с версией 9, поэтому я вернулся к версии 8.

Ответ №1:

Я думаю, что это проблема в версии 8. Попробуйте немного увеличить версию. Он работает с версии 9.0.0-beta.4. Или вы можете попробовать перейти на версию 9.0.0-rc.3. Но в этом случае вам придется изменить свой код из-за изменения api.

Это документация API версии 9. https://aleclarson.github.io/react-spring/v9/#Revamped-types

Если вы хотите поддерживать свой проект в долгосрочной перспективе, я рекомендую рано или поздно перейти на последнюю версию 9.

Вот рабочий пример с бета-версией 4:

https://codesandbox.io/s/usechain-example-r3ngb

Метки: