Predicting the width of an HTML element to smoothly transition its opacity and width using CSS - a helpful guide

Question

Predicting the width of an HTML element to smoothly transition its opacity and width using CSS - a helpful guide

Currently, I am facing a situation where I have a span node with an innerText that I will be changing at runtime.
As I change the innerText, the offsetWidth of the node will also change based on the length of the future innerText.
In order to handle CSS transitions for both the opacity and width of the span element, I need to anticipate the future offsetWidth.
It is crucial in this case to smoothly transition both the opacity and the width of the span element, which is why I cannot change the innerText immediately.

Is there a way for me to accurately predict the exact value of the width?

On a broader scale, is it possible to "simulate" DOM changes to determine the anticipated CSS properties?

Here is a potential starting code snippet:

let h1 = document.getElementsByTagName("h1")[0];
let span = document.getElementsByTagName("span")[0];
h1.addEventListener("click", function() {
  if(span.innerText == "Better") {
    span.innerText = "Awsome";
  } else {
    span.innerText = "Better";
  }
})

h1 span {
  border: 1px solid red;
  display: inline-block;
  padding: 4px;
  transition-property: all;
}

<h1>Hello <span>Awsome</span> World!</h1>

javascript html css dom css-transitions

Answer 1

Answer №1

In my response, I suggested a method where you can duplicate the element, update its content to your desired text, and calculate its width. Then, adjust the original width based on the calculated width of the duplicated element.

Here is an example implementation:

let h1 = document.getElementsByTagName("h1")[0];
let span = document.getElementsByTagName("span")[0];
span.style.width = `${span.clientWidth}px`;
h1.addEventListener("click", function() {
  const nextWord = getNextWord();
  const featureWidth = getFeatureWidth(nextWord);
  span.style.color = 'rgba(0, 0, 0, 0)';
  span.style.width = `${featureWidth}px`;
  setTimeout(() => {
    span.textContent = nextWord;
    span.style.color = 'rgba(0, 0, 0, 1)';
  }, 300);
});

function getNextWord() {
  if(span.innerText == "Better") {
    return "Awesome";
  }
  return "Better";
}

function getFeatureWidth(word) {
  const clonedSpan = document.createElement('span');
  clonedSpan.setAttribute('style', 'position: absolute;z-index: -1');
  clonedSpan.textContent = word;
  h1.appendChild(clonedSpan);
  const width = clonedSpan.clientWidth;
  h1.removeChild(clonedSpan);
  return width;
}

h1 span {
  border: 1px solid red;
  display: inline-block;
  padding: 4px;
  transition: all .3s ease;
}

<h1>Hello <span>Awesome</span> World!</h1>

Answer 2

In my response, I suggested a method where you can duplicate the element, update its content to your desired text, and calculate its width. Then, adjust the original width based on the calculated width of the duplicated element.

Here is an example implementation:

let h1 = document.getElementsByTagName("h1")[0];
let span = document.getElementsByTagName("span")[0];
span.style.width = `${span.clientWidth}px`;
h1.addEventListener("click", function() {
  const nextWord = getNextWord();
  const featureWidth = getFeatureWidth(nextWord);
  span.style.color = 'rgba(0, 0, 0, 0)';
  span.style.width = `${featureWidth}px`;
  setTimeout(() => {
    span.textContent = nextWord;
    span.style.color = 'rgba(0, 0, 0, 1)';
  }, 300);
});

function getNextWord() {
  if(span.innerText == "Better") {
    return "Awesome";
  }
  return "Better";
}

function getFeatureWidth(word) {
  const clonedSpan = document.createElement('span');
  clonedSpan.setAttribute('style', 'position: absolute;z-index: -1');
  clonedSpan.textContent = word;
  h1.appendChild(clonedSpan);
  const width = clonedSpan.clientWidth;
  h1.removeChild(clonedSpan);
  return width;
}

h1 span {
  border: 1px solid red;
  display: inline-block;
  padding: 4px;
  transition: all .3s ease;
}

<h1>Hello <span>Awesome</span> World!</h1>

Answer 3

Answer №2

After being inspired by @Mosh Feu's solution, I have put together a revised version of the case:

let h1;
let span;
let width;
let words;
let opacity;
let button;
button = document.getElementsByTagName("button")[0];
element = document.getElementById("word");
width = window.getComputedStyle(element).getPropertyValue("width");
words = [
  'Better',
  'Great',
  'Best Ever',
  'Incredible',
  'Awesome'
];
element.setAttribute('style', `
  color: rgba(0, 0, 0, ${opacity = 1});
  width: ${width};
`);
let iterator = words.values();
function changeWord() {
  let word;
  let next;
  let width;
  next = iterator.next();
  if (next.done) {
    iterator = words.values();
    next = iterator.next();
  }
  word = next.value;
  width = getFeatureWidth(word);
  element.setAttribute('style', `
    color: rgba(0, 0, 0, ${opacity = 0});
    width: ${width};
  `);
  setTimeout(() => {
    element.textContent = word;
    element.setAttribute('style', `
      color: rgba(0, 0, 0, ${opacity = 1});
      width: ${width};
    `);
  }, 300);
}
button.addEventListener("click", changeWord);

function getFeatureWidth(word) {
  let clone;
  let width;
  let parent;
  clone = element.cloneNode(true);
  clone.setAttribute('style', `
    position: absolute;
    z-index: -1
  `);
  clone.textContent = word;
  parent = element.parentElement;
  parent.appendChild(clone);
  width = window.getComputedStyle(clone).getPropertyValue("width");
  parent.removeChild(clone);
  return width;
}

#word {
  border: 1px solid red;
  background-color: rgba(0, 0, 0, .25);
  display: inline-block;
  transition-property: color, width;
  transition-duration: .3s, .3s;
  transition-delay: 0, 0;
  transition-timing-function: ease, ease;
  white-space: nowrap;
  box-sizing: content-box;
}

<h1>
  Hello <span id="word">Awesome</span> World!
</h1>
<button>Next</button>

Answer 4

After being inspired by @Mosh Feu's solution, I have put together a revised version of the case:

let h1;
let span;
let width;
let words;
let opacity;
let button;
button = document.getElementsByTagName("button")[0];
element = document.getElementById("word");
width = window.getComputedStyle(element).getPropertyValue("width");
words = [
  'Better',
  'Great',
  'Best Ever',
  'Incredible',
  'Awesome'
];
element.setAttribute('style', `
  color: rgba(0, 0, 0, ${opacity = 1});
  width: ${width};
`);
let iterator = words.values();
function changeWord() {
  let word;
  let next;
  let width;
  next = iterator.next();
  if (next.done) {
    iterator = words.values();
    next = iterator.next();
  }
  word = next.value;
  width = getFeatureWidth(word);
  element.setAttribute('style', `
    color: rgba(0, 0, 0, ${opacity = 0});
    width: ${width};
  `);
  setTimeout(() => {
    element.textContent = word;
    element.setAttribute('style', `
      color: rgba(0, 0, 0, ${opacity = 1});
      width: ${width};
    `);
  }, 300);
}
button.addEventListener("click", changeWord);

function getFeatureWidth(word) {
  let clone;
  let width;
  let parent;
  clone = element.cloneNode(true);
  clone.setAttribute('style', `
    position: absolute;
    z-index: -1
  `);
  clone.textContent = word;
  parent = element.parentElement;
  parent.appendChild(clone);
  width = window.getComputedStyle(clone).getPropertyValue("width");
  parent.removeChild(clone);
  return width;
}

#word {
  border: 1px solid red;
  background-color: rgba(0, 0, 0, .25);
  display: inline-block;
  transition-property: color, width;
  transition-duration: .3s, .3s;
  transition-delay: 0, 0;
  transition-timing-function: ease, ease;
  white-space: nowrap;
  box-sizing: content-box;
}

<h1>
  Hello <span id="word">Awesome</span> World!
</h1>
<button>Next</button>

Predicting the width of an HTML element to smoothly transition its opacity and width using CSS - a helpful guide

Answer №1

Answer №2

Similar questions

Updating the background image without having to validate the cache

Repetitive ajax requests using jquery

Can you please explain the purpose of the mysterious JavaScript function f => f?

A tag that does not adhere to the background color's rgba opacity restrictions

Extract the value from JSON data

Creating unique styles for mat-option with Active and Hover effects in Angular Materials

Instructions on setting a photo as a background image using a text-based model

Searching for images in the filesystem using a recursive deferred approach

Is it a common issue that sound.stop() doesn't seem to function properly, while sound.play() operates successfully within Howler

What is the best way to retrieve and display database values for bootstrap dropdown items using an ajax request?

Transfer information through the react-native-ble-plx module

Struggling to design a button that can delete tasks from the list, but encountering issues with the filter function

In-depth CSS Reset for specific tags

The proper method for redirecting the view after a successful AJAX request in a MVC application

Create a bootstrap table with td elements that have no wrap for their content

What is the best way to insert objects into another array of objects at alternating positions?

Working with arrays and elements in JavaScript using regular expressions

Tips for effectively passing query string parameters in Angular

HTML script tag failing to load

Transform JSON array containing identical key-value pairs