Reactjs fade div with inline styles

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)

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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;

Method 3

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/


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x