Changes in content result in modifications to the size of transition elements

Question

Changes in content result in modifications to the size of transition elements

Have you ever encountered a button with changing text upon being pressed? The transition in text leads to a shift in the button's width. Wouldn't it be amazing if one could smoothly transition the change in width of an element using a code snippet like the one below?

#el {
    transition: width 150ms ease-out;
}

However, this method only applies when the width property is explicitly modified.

Is there an inventive approach to achieving this effect? Check out this fiddle to experiment with it.

javascript jquery html css

Answer 1

Answer №1

Check out this interactive demo which demonstrates the same concept using JavaScript library.

document.querySelector('button').addEventListener('click', function() {
    var width = this.style.width;
    var height = this.style.height;
    this.innerHTML = 'Hello, World!';
    var newWidth = this.style.width;
    this.style.width = width;
    this.style.height = height;
    this.animate([{width:width}, {width:newWidth}], {duration:1000, fill: 'forwards'});
});

Answer 2

Check out this interactive demo which demonstrates the same concept using JavaScript library.

document.querySelector('button').addEventListener('click', function() {
    var width = this.style.width;
    var height = this.style.height;
    this.innerHTML = 'Hello, World!';
    var newWidth = this.style.width;
    this.style.width = width;
    this.style.height = height;
    this.animate([{width:width}, {width:newWidth}], {duration:1000, fill: 'forwards'});
});

Answer 3

Answer №2

After finding a solution in Maurice's response to prevent the button's text from overflowing onto a second line, it was discovered that setting the button's height to its original value was necessary. A better approach would be to

button {
    white-space: nowrap;
}

to ensure that the button's text remains on a single line as it transitions. By doing this, the code can be simplified as there is no longer a need to adjust the button's height:

$('button').click(function() {
    var width = $(this).css('width');
    $(this).text('Hello, World!');
    var newWidth = $(this).css('width');
    $(this).css({'width': width});
    $(this).animate({'width': newWidth}, 400);
});

http://jsfiddle.net/2rr54vp2/1/

Answer 4

After finding a solution in Maurice's response to prevent the button's text from overflowing onto a second line, it was discovered that setting the button's height to its original value was necessary. A better approach would be to

button {
    white-space: nowrap;
}

to ensure that the button's text remains on a single line as it transitions. By doing this, the code can be simplified as there is no longer a need to adjust the button's height:

$('button').click(function() {
    var width = $(this).css('width');
    $(this).text('Hello, World!');
    var newWidth = $(this).css('width');
    $(this).css({'width': width});
    $(this).animate({'width': newWidth}, 400);
});

http://jsfiddle.net/2rr54vp2/1/

Answer 5

Answer №3

It seems like a challenging task since the browser struggles to accurately determine the target width. Let's assume it captures the width before the transition, only to find out that the button has already expanded by then! It's quite possible that the transition is indeed occurring, but it's not visible to us. To address this issue, one must define an initial width and ascertain the target width using JavaScript.

Answer 6

It seems like a challenging task since the browser struggles to accurately determine the target width. Let's assume it captures the width before the transition, only to find out that the button has already expanded by then! It's quite possible that the transition is indeed occurring, but it's not visible to us. To address this issue, one must define an initial width and ascertain the target width using JavaScript.

Changes in content result in modifications to the size of transition elements

Answer №1

Answer №2

Answer №3

Similar questions

Modifying the id attribute dynamically using jQuery during runtime

Unable to access this context in Firefox debugger after promise is returned

How can I incorporate the "onClick()" function within an ajax call, while still utilizing the data returned in the success message?

Using an ajax call to dynamically generate an array for jquery autocomplete feature

Struggling with a persistent Jquery AJAX problem despite numerous attempts to resolve it

Bootstrap component malfunctioning and not performing as expected

Registering users in Laravel using asynchronous JavaScript and XML (AJ

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

An approach to looping through arrays within an object in JavaScript

Learn how to extract JSON information from a URL and integrate it into either a table or dropdown in Vue.js

The intersection of JavaScript, node.js, and cybersecurity

Utilize npm to construct a Vue application and execute it on a Raspberry Pi device

Display Image Automatically Upon Page Opening

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

How do I resize an image to fit perfectly within the viewport dimensions?

Application with menu design, similar to the layout of google.com on mobile devices

Any modifications made to a copied object will result in changes to the original object

Upon logging in to the first HTML page, the user will be automatically redirected to the second HTML page while passing values

What is the reason for needing a page reload in Javascript or JQuery?

Creating a Form with Table-like Alignment Using Div Tags