如何添加淡入动画以<div>fading-in text</div>仅使用内联样式？
class Practise extends Component {
state = { show: false };
componentDidMount() {
setTimeout(() => {
this.setState({ show: true });
}, 2000);
}
render() {
if (!this.state.show) return <div>default regular text</div>;
return <div>fading-in text</div>;
}
}
（请不要图书馆解决方案，我想自己弄清楚）
该setState方法有一个回调作为第二个（可选）参数。因此，一旦您设置为您this.state.show，true您就可以opacity使用此回调参数来增加您的数量。回调函数可能如下所示：
fadingIn(){
const timer = setInterval(() => {
if (this.state.opacity === 1) {
clearInterval(timer);
}
this.setState({ opacity: this.state.opacity + 0.1 })
}, 100);
}
因此，正如您已经添加的那样，componentDidMount您可以在那里触发它
componentDidMount(){
setTimeout(() => this.setState({ show: true }, this.fadingIn), 1000)
}
render(){
return <div>
{!this.state.show
? <div>Regular</div>
: <div style={{opacity: this.state.opacity}}>Fade In</div>}
</div>
}
更新
尝试这样的事情：
const withFading = ({ Faded, duration, isOut }) => {
const inEffect = `
@keyframes react-fade-in {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
`;
const outEffect = `
@keyframes react-fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
`;
return (
<div>
// Here we add style tag with the css for fadeIn & fadeOut
// depends on a input value of isOut parameter.
// It does same thing as an example from below
// <style>
// body { your css rules }
// </style>
// with react we can pass `body { ... }` as a child into
// style tag as i did.
<style children={isOut ? outEffect : inEffect} />
<div style={{
animationDuration: `${duration}s`,
animationIterationCount: 1,
animationName: `react-fade-${(isOut ? 'out' : 'in')}`,
animationTimingFunction: isOut ? 'ease-out' : 'ease-in'
}}
><Faded /></div>
</div>
)
}
const Hello = () => <div>Hello</div>
const FadedHello = withFading({ Faded: Hello, duration: 2, isOut: false});
我尝试在“原因”评论部分回答您的问题（这个问题：可以使用不透明度和过渡而不是关键帧来完成...”）据我所知，我们必须使用为过渡添加触发器（例如 CSS 中的悬停伪类或react事件中的 onMouseEnter 和 onMouseLeave props）
这是我的答案，我已经测试过了
import React, {useState} from 'react'
function App() {
const [isHovered, setIsHovered] = useState(false)
return (
<div
style={{
backgroundColor: isHovered ? 'orange' : 'green',
opacity: isHovered ? 1 : 0,
height: isHovered ? 400 : 200,
width: isHovered ? 400 : 200,
transition: 'all 1s',
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
</div>
);
}
export default App;
您已在特定时间后将 show 从 false 更改为 true，这不会产生淡入淡出的效果。
相反，您必须change opacity 1 to 0在一些修复秒后进行。当不透明度为0. 你可以设置show: true