尝试在语义UI React中使用React Spring，简单示例

Question

大家好，谢谢您的时间。

我正在尝试将Semantic-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

---

我对如此愚蠢的问题表示由衷的歉意，但我当时有点绝望，不胜感激。]

大家好，谢谢您的宝贵时间。我正在尝试将Semantic-ui-React与React Spring一起使用，在这里我有一个简短的示例...从'react'导入React从“ semantic-ui -...

Answer 1

在动画中，只有本地元素作为常量存在，例如animated.div。您必须使用animation作为其他非本机元素的功能，例如语义UI中的组件：animated(Header)

  const AnimatedHeader = animated(Header);

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