The transform property will work in some instances, but what am I doing wrong in this instance:
- Making a span element and putting it in the innerHTML of a pre tag
- Span element has opacity: 0, and transform: 2s.
- Selecting this span element, and then changing opacity to 0.
- All this done in a function, shown below:
JavaScript
x
7
1
const lineText = document.getElementById("line-text");2
3
function DisplayText() {4
lineText.innerHTML += "<span>TEXT!</span>";5
lineText.getElementsByTagName("span")[0].style.opacity = 1;6
}7
DisplayText();JavaScript
1
4
1
span {2
opacity: 0;3
transition: 1s;4
}JavaScript
1
1
1
<pre id="line-text"></pre>This always results in the element just appearing instantly. Any ideas what’s wrong?
Advertisement
Answer
JavaScript
1
9
1
const lineText = document.getElementById("line-text");2
3
function DisplayText() {4
lineText.innerHTML += "<span>TEXT!</span>";5
setTimeout(() => {6
lineText.getElementsByTagName("span")[0].style.opacity = 1;7
}, 10);8
}9
DisplayText();JavaScript
1
4
1
span {2
opacity: 0;3
transition: 1s;4
}JavaScript
1
15
15
1
<html>2
3
<head>4
<title>Parcel Sandbox</title>5
<meta charset="UTF-8" />6
7
</head>8
9
<body>10
11
<pre id="line-text"></pre>12
13
</body>14
15
</html>I think if you add it in this way it will do what you want :
JavaScript
1
5
1
lineText.getElementsByTagName("span")[0].style = {2
transition:'1s',3
opacity:14
};5
or if it’s still not working,I think that would because of by the time that javascript is appending “TEXT!” to lineText is applying style as well , so we need a small delay
JavaScript
1
4
1
setTimeout(() => {2
lineText.getElementsByTagName("span")[0].style.opacity = 1;3
}, 10);4
what I did is I let js to complete it’s tasks in it’s thread and then add style