CSS transform property not working when it is triggered through JS function

Question

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:

const lineText = document.getElementById("line-text");

function DisplayText() {
  lineText.innerHTML += "<span>TEXT!</span>";
  lineText.getElementsByTagName("span")[0].style.opacity = 1;
}
DisplayText();

span {
  opacity: 0;
  transition: 1s;
}

<pre id="line-text"></pre>

This always results in the element just appearing instantly. Any ideas what's wrong?

Ali Sattarzadeh · Accepted Answer · 2022-11-22 18:58:00Z

0

const lineText = document.getElementById("line-text");

function DisplayText() {
   lineText.innerHTML += "<span>TEXT!</span>";
   setTimeout(() => {
     lineText.getElementsByTagName("span")[0].style.opacity = 1;
   }, 10);
}
DisplayText();

    span {
            opacity: 0;
            transition: 1s;
        }

<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

</head>

<body>

    <pre id="line-text"></pre>

</body>

</html>

I think if you add it in this way it will do what you want :

lineText.getElementsByTagName("span")[0].style = {
   transition:'1s',
   opacity:1
 };

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

 setTimeout(() => {
     lineText.getElementsByTagName("span")[0].style.opacity = 1;
   }, 10);

what I did is I let js to complete it's tasks in it's thread and then add style

edited Nov 22, 2022 at 18:58

answered Nov 22, 2022 at 18:31

Ali Sattarzadeh

3,6572 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user18040647 Over a year ago

This doesn't seem to work (element does not appear at all)

Ali Sattarzadeh Over a year ago

aha got it let me update my answer

user18040647 Over a year ago

This works, thanks! Is this really a limitation of JS, that it is too fast for itself?

Ali Sattarzadeh Over a year ago

yes, that's right

Ali Sattarzadeh Over a year ago

if it's what you were looking for please vote up and mark it as the answer

Collectives™ on Stack Overflow

CSS transform property not working when it is triggered through JS function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related