CODEWITHSUNDEEP
javascripthtml
Flat Screen
Flat Screen

Reputation: 62

how could I animate innerHTML

I am looking to animate the text, "This is NOT allowed" below. 

 document.getElementById("ve").innerHTML = '<p  style="text-align:center"><h1><span style="color:blue">This is  </span><span style="color:red">NOT allowed</span><span style="color:blue">. </span></h1></p>';

Unfortunately my situation is I have to use innerHTML in a java script. There is no HTML page. A java script dynamically generates HTML so I dont have access to HTML page. I want to animate the text either fade-in or some simple bounce. Because it is a javascript file I dont have access to css file (or am I wrong?). I am looking for less code and very simple mechanism.One idea is I can simulate blinking by copy-pasting showing innerHTML, setting it to "", and showing again every 1 second. Is there any elegant way? I cannot use any javascript framework like jQuery.

Note*: I copy pasted the code to assign the value to innerHTML, and set it to "" every 2 seconds, the blinking effect is not happening. So that option is ruled out, I guess. Am a UI nube with extensive backend experience :(

Edit** I have decided to go with @JoshB answer. It works and is much cleaner. The HTML tags and animation are clearly separated. I am targeting people with some medical conditions. Me being a 0/10, I want simpler dumbed down solution. Thanks for your help.

Upvotes: 1

Views: 977

Answers (2)

JoshB
JoshB

Reputation: 64

You can actually just change the appearance of the text through DOM CSS in JavaScript. I decided the simpliest method was to make a loop with setTimeout to achieve the end goal. 

<!DOCTYPE html>
<html>
<head>
	<title>TEST</title>
</head>
<body>
<p id="ve">Example Text</p>
<script>
	state = "off";
	function blinkText() {
		if (state == "on") {
			state = "off";
			document.getElementById("ve").style.visibility = "visible";
			setTimeout(blinkText, 1000);
		} else {
			state = "on";
			document.getElementById("ve").style.visibility = "hidden";
			setTimeout(blinkText, 1000);
		}
	}
	blinkText();
</script>
</body>
</html>

This basically turns on and off the visibility of the text every second. The time, in milliseconds, can be modified through the second parameter in the setTimeout function. I hope this helps you out with your problem!

Upvotes: 4

Pengling Wu
Pengling Wu

Reputation: 36

You're allowed to add lots more stuff to your innerHTML.

  • For example, if you wanted to add a fade-in effect, you would start with the text set to invisible using "opacity: 0"
  • Also you'd add a transition in preparation for that value to change using "transition: opacity 1s".
  • Then, you'd use javascript to get a reference to that DOM node. Once you have a reference to that DOM node, you would change the value of the opacity by changing the node's style.opacity value.

Put together, it would look like:

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById("ve").innerHTML = '<p style="text-align:center"><h1 id="fadein" style="opacity: 0; transition: opacity 1s"><span style="color:blue">This is  </span><span style="color:red">NOT allowed</span><span style="color:blue">. </span></h1></p>';

  const fadein = document.getElementById("fadein");
  setTimeout(() => {
    fadein.style.opacity = "1";
  }, 0);
});

The reason for the timeout has to do with the order that the page is rendered and the order in which javascript code is run.

Upvotes: 0

Related Questions