在弹出关闭 x 秒后删除 css class

Question

I have a delete popup which works fine, but have added z-index on that, due to that it gets flickering effect. below is working code

<div className={modalOpen ? 'fullw content-holder has-scroll model-opened setHeaderZindex' : 'fullw content-holder has-scroll'}>

i want something like:

<div className={modalOpen? 'fullw content-holder has-scroll model-opened setHeaderZindex: otherState? fullw content-holder has-scroll model-opened(which remove z-index class on setTimeout): 'fullw content-holder has-scroll'(default class)} </div>

I am trying to remove 'setHeaderZindex' using setTimeout. sample video link demo video

Answer 1

You can use the useState hook after setTimeout

  export default function App() {
    const [className, setClassName] = useState('fullw content-holder has-scroll model-opened')
    setTimeout(() => {
      setClassName('fullw content-holder has-scroll model-opened setHeaderZindex');
    }, 2000)

  return (
    <div className="App">
      <h1>Hello</h1>
      <h1 className={className}>World</h1>
    </div>
  );
}

Answer 2

Try to solve problem with styled-components. The simple example of how it works.

const StyledDiv = styled.div`
  ${props => props.something ? 'display: flex;' : 'display: none;'}
`

return <StyledDiv something={modalOpen} />