Reactjs淡入淡出div（使用内联样式）

Question

我该如何使用仅内联样式为<div>淡入文本</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>;
  }
}

（请勿提供库解决方案，我想原生解决）

- WooQuee

---

我认为这个解决方案也回答了这个问题 https://stackoverflow.com/questions/61947729/reactjs-set-transition-in-inline-css - Jabal Logian

Answer 1

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});

操作示例

- The Reason

---

抱歉，您能添加一些描述来说明代码正在做什么吗？我不理解这是什么 <style children={isOut ? outEffect : inEffect} />。 - WooQuee

那么这个 children 属性是样式元素上的某种保留属性吗？ - WooQuee

这可以使用opacity和transition来实现，而不是使用keyFrames，因为它们的浏览器支持要差得多。 - WooQuee

@WooQuee 请继续尝试。 - The Reason

@TheReason 兄弟！那个样式标签太棒了！！感谢你的提示！！ - David Roth

Answer 2

我会在“原因”评论区回答你的问题（这个问题：是否可以使用不透明度和过渡来代替关键帧...）。据我所知，我们必须为过渡添加触发器（例如CSS中的hover伪类或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;

- Jabal Logian

---

谢谢，这就是我在寻找的答案。在我看来，CSS动画是向元素添加动画最简单的方法。 - Shakir

Answer 3

你已经在特定时间将show从false更改为true，这不会产生淡入淡出的效果。相反，你需要在固定秒数后将不透明度从1更改为0。当不透明度为0时，你可以设置show:true。

请查看此链接https://jsfiddle.net/kaushikbarodiya/La3wysxk/

- cauchy

---

谢谢您的评论，但是您链接中的代码并没有产生“淡入”动画效果。 - WooQuee

但是你明白我在尝试做什么吗？ - cauchy

不行，因为它不能做我想要的事情。 - WooQuee