Reactjs 使用內聯樣式淡入淡出 div

Question

如何僅使用內聯樣式向<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>;
  }
}

（請不要圖書館解決方案，我想自己弄清楚）

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

Worked Example

更新

嘗試這樣的事情：

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

Worked example

Answer 2

我嘗試在“原因”評論部分回答您的問題（這個問題：可以使用不透明度和過渡而不是關鍵幀來完成...”）據我所知，我們必須使用為過渡添加觸發器（例如 CSS 中的 hover 偽類或 react 事件中的 onMouseEnter 和 onMouseLeave 道具）

這是我的答案，我已經測試過了

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;

Answer 3

您已在特定時間后將 show 從 false 更改為 true，這不會產生淡入淡出的效果。

相反，您必須在一些修復秒后將change opacity 1 to 0 。 當不透明度為0 。 您可以設置show: true

檢查此鏈接https://jsfiddle.net/kaushikbarodiya/La3wysxk/