JavaScript How to Make an Element Disappear from the Screen Without It Glitching?

[dlps]

So, I attempted three different ways to make an element disappear completely from the screen (displayed in the code below). Whenever I refresh the page, for each solution I tried, it has a glitch of some sort. By glitch, I mean, when I refresh the site, it shows the original text and quickly takes the text off. I'm wondering if there is a way of preventing this from happening by doing it in some alternative way.

// WAY 1
document.getElementsByTagName(element)[pos];
thisElement.remove();

// WAY 2
document.getElementsByTagName(element)[pos];
thisElement.style.display = 'none';

// WAY 3
document.getElementsByTagName(element)[pos];
thisElement.style.visibility = 'hidden';

 

[abhiweb_admec]

The effect can be created with the combination of using both opacity and display none properties. Firstly start decreasing the value of the opacity to 0 and when it becomes zero then check for it and apply display none this will appear as the element is becoming transparent and after that its gone.

To get a better control over the animation check out this article related to animations.

 

[BGB]

Did you try to hide the element with css?