Попытка использовать React Spring с Semanti c UI React, простой пример

Question

Всем привет и спасибо за ваше время.

Я пытаюсь использовать Semanti c -ui-React с React Spring, здесь у меня есть краткий пример ...

import React from 'react'
import {Segment, Header} from "semantic-ui-react"
import {useSpring, animated, config} from "react-spring"
function Semantix() {

    const fading = useSpring({ config: config.slow,

        from : {
            opacity : 0,
            marginLeft:"-50px"
        },
        to : {
            opacity : 1,
            marginLeft: "300px"
        }
    })



    return (
        <Segment>
            <animated.Header style={fading}>Hey Hey</animated.Header>
        </Segment>
    )
}

export default Semantix

---

Мои искренние извинения за такой глупый вопрос, но я немного отчаялся в то время, любая помощь будет признательна

Answer 1

В анимации в качестве констант присутствуют только нативные элементы, например animated.div. Вы должны использовать анимированный как функцию для другого не родного элемента, такого как компонент от semanti c -ui: animated(Header)

  const AnimatedHeader = animated(Header);

  return (
    <Segment>
      <AnimatedHeader style={fading}>Hey Hey</AnimatedHeader>
    </Segment>
  );