Exactly what the title says. If anyone has any solutions in either CSS or js i would appreciate it

  animation-delay: 5s;
  animation-duration: 1ms;
  animation-name: slidein;
  opacity: 100;

}

@keyframes slidein {
  from {
      opacity:0;
  }

  to {
 opacity: 100;
  }
}```

CodePudding user response：

Okay, so how I would go about would be as follows:

1. Create a variable called notVisible and set it to true
2. Create the button and set its hidden property to the variable you created
3. Use a new promise and set it to resolve after 5 seconds, changing the variable to false then this should have your button appear

await new Promise(resolve => setTimeout(resolve, 5000)).then((res)=>{setNotVisible(false)});

CodePudding user response：

If I had the exact problem this is how I would do it.

1. Make a variable to monitor state of the button

const [isVisible, setVisible] = useState(false)

2. Now you use a call back in setTimeout which will trigger after 5000ms.
3. So after 5000ms call back will do setVisible(true)
4. Your button can have an expression which will add a class if the value of isVisible is true

<button 
    style = {{display: 'None'}} 
    className = {isVisible ? '' : 'MyClass'}
>
    Click Me
</button>

Where MyClass is your class which will have all the properties of a button which will make it visible.

I hope it helps :)

CodePudding user response：

const [isVisible, setIsVisible] = useState(false);

Now in useEffect to change visibility after page loading:

useEffect(() => {
setTimeout(() => {
  setIsVisible(true);
}, 5000)
}, []);

Now in your button: toggle the visibility according to your state using a ternary operator.