how to disable animation when rendering a page? - css

Question

It is necessary that when the button is pressed, there is an animation of the appearance and hiding of the text. I wrote the following code, but when the page renders, the text hide animation is triggered.
Can I turn off the animation that fires when the page is rendered? Sample code below.
import React, { useState } from "react";
import "./styles.css";
export default function App() {
let [vision, setVision] = useState(true);
let hangler = () => {
setVision(!vision);
};
return (
<div className="App">
<h1 className={vision ? "Text hidden" : "Text shown"}>Hello World</h1>
<button onClick={hangler}>click</button>
</div>
);
}
Css:
.App {
font-family: sans-serif;
text-align: center;
}
.Text {
color: blue;
}
.hidden {
animation: fadeOut ease 1.5s;
animation-fill-mode: forwards;
}
.shown {
animation: fadeIn ease 1.5s;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
visibility: hidden;
}
}
This code is at this link

Answer 1

Your classes are inverted, it should be vision ? "Text shown" : "Text hidden".
This will still animate the header to fade in. If it's ok then you are done.
However, if you don't want the initial animation. You can set animation-duration: 0s; to short-circuit it and remove the property after the load but this is not elegant.
For something that simple I would use transitions instead.
.hidden {
opacity: 0;
visibility: hidden;
transition: opacity 1.5s, visibility 1.5s;
}
.shown {
opacity: 1;
visibility: visible;
transition: opacity 1.5s, visibility 1.5s;
}