How can I avoid transition during dynamic style in JavaScript

user_13536893 0
Viewed 63

I'm using JavaScript to copy all styles of the div#old and use it to the div#young dynamically. I have successful done it, but when I add the transition property, the div#young applies a transition to all styles that I'm copying which I don't want.

Here is my code:

let styles = getComputedStyle(old);
all_style = ['width', 'height', 'background', 'border-radius', 'transition']
for (var i = 0; i < all_style.length; i++) {
  young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
}
.container {
  display: flex;
  justify-content: space-around;
  width: 60%;
}

#old {
  width: 110px;
  height: 110px;
  background: red;
  border-radius: 50%;
  transition: 1s ease-in-out all;
}

#young {
  width: var(--width);
  height: var(--height);
  background: var(--background);
  border-radius: var(--border-radius);
  transition: var(--transition);
}
<div class="container">
  <div id="old"></div>
  <div id="young"></div>
</div>

In summary I don't want the transition on border-radius of div#young and the reason why I'm adding transition is for my animation, so to remove it won't answer my question.

css html javascript
2 Answers

Add the transition with very little delay.

let styles = getComputedStyle(old);
all_style = ['width', 'height', 'background', 'border-radius', 'transition']
for (var i = 0; i < all_style.length; i++) {
  if (all_style[i] !== 'transition') {
    young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
  } else {
    setTimeout(() => {
      young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
    }, 10); // 1 second / 100
  }
}
.container {
  display: flex;
  justify-content: space-around;
  width: 60%;
}

#old {
  width: 110px;
  height: 110px;
  background: red;
  border-radius: 50%;
  transition: 1s ease-in-out all;
}

#young {
  width: var(--width);
  height: var(--height);
  background: var(--background);
  border-radius: var(--border-radius);
  transition: var(--transition);
}
<div class="container">
  <div id="old"></div>
  <div id="young"></div>
</div>

user_106987410

make 0 the transition you don't want to happen. The order is important, the all need to be the first one:

let styles = getComputedStyle(old);
all_style = ['width', 'height', 'background', 'border-radius', 'transition']
for (var i = 0; i < all_style.length; i++) {
  young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
}
.container {
  display: flex;
  justify-content: space-around;
  width: 60%;
}

#old {
  width: 110px;
  height: 110px;
  background: red;
  border-radius: 50%;
  transition: 1s ease-in-out all,border-radius 0s;
}

#young {
  width: var(--width);
  height: var(--height);
  background: var(--background);
  border-radius: var(--border-radius);
  transition: var(--transition);
}
<div class="container">
  <div id="old"></div>
  <div id="young"></div>
</div>

If you don't want any you can update the display value after the styles copy.

let styles = getComputedStyle(old);
all_style = ['width', 'height', 'background', 'border-radius', 'transition']
for (var i = 0; i < all_style.length; i++) {
  young.style.setProperty(`--${all_style[i]}`, styles.getPropertyValue(all_style[i]));
}
young.style.display="initial"
.container {
  display: flex;
  justify-content: space-around;
  width: 60%;
}

#old {
  width: 110px;
  height: 110px;
  background: red;
  border-radius: 50%;
  transition: 1s ease-in-out all;
}

#young {
  width: var(--width);
  height: var(--height);
  background: var(--background,none);
  border-radius: var(--border-radius);
  transition: var(--transition);
  
  display:none;
}
<div class="container">
  <div id="old"></div>
  <div id="young"></div>
</div>

user_86203330
Related