尝试将 React Spring 与语义 UI React 一起使用,简单示例
Trying to use React Spring with Semantic UI React, simple example
大家好,感谢您的宝贵时间。
我正在尝试使用 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
对于这样愚蠢的问题,我深表歉意,但我当时有点绝望,任何帮助将不胜感激
在动画中只有原生元素作为常量存在,例如animated.div
。您必须将动画用作其他非本机元素的函数,例如来自 semantic-ui 的组件:animated(Header)
const AnimatedHeader = animated(Header);
return (
<Segment>
<AnimatedHeader style={fading}>Hey Hey</AnimatedHeader>
</Segment>
);
大家好,感谢您的宝贵时间。
我正在尝试使用 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
对于这样愚蠢的问题,我深表歉意,但我当时有点绝望,任何帮助将不胜感激
在动画中只有原生元素作为常量存在,例如animated.div
。您必须将动画用作其他非本机元素的函数,例如来自 semantic-ui 的组件:animated(Header)
const AnimatedHeader = animated(Header);
return (
<Segment>
<AnimatedHeader style={fading}>Hey Hey</AnimatedHeader>
</Segment>
);