How can I add a fade-in animation to <div>fading-in text</div> using only inline styles?

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

(No library solutions please, I want to figure it out natively)

How can I add a fade-in animation to <div>fading-in text</div> using only inline styles?

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

(No library solutions please, I want to figure it out natively)

• javascript
• reactjs

• I think this solution answers this question too stackoverflow.com/questions/61947729/… – Jabal Logian Commented Apr 17, 2021 at 14:11

3 Answers 3

The setState method has a callback as second(optional) parameter. So once you set your this.state.show to true you can increment your opacity using this callback parameter. The callback function may look like below:

fadingIn(){
  const timer = setInterval(() => {
    if (this.state.opacity === 1) {
      clearInterval(timer);
    }
    this.setState({ opacity: this.state.opacity + 0.1 })
  }, 100);
}

So as you already added componentDidMount you can trigger it there

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

UPDATE

Try something like this:

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

I try to answer your question in the "The Reason's" comment section (this question: can this be done using opacity and transition instead of keyFrames...") As far as I know, we have to use add a trigger for the transition (such as hover pseudo-class in CSS or onMouseEnter and onMouseLeave props in react events)

Here is my answer and I have tested it

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;

You have changed show from false to true after particular time which will not give effect of fade in fade out.

Instead you have to change opacity 1 to 0 after some fix seconds. And when opacity is 0. You can set show: true

Check this link https://jsfiddle.net/kaushikbarodiya/La3wysxk/