Suppose there is a button with its own style:

<a href="" class="action-button">SomeText</a>

When I use jQuery to change the button text to SomeTextSomeText, the button becomes wider, but without animation, with a jerk. Tried to set transition: width .25s ease-in-out; but it had no effect. Actually, the question is how to determine the smoothness of changing the text inside the element using js (preferably without fadeIn / fadeOut or using css)?

    1 answer 1

     // заменяет текст в ссылке function changeLinkText( link, newText ){ const wrapper = link.firstChild; // для того чтобы transition работал ширина должна быть не auto; link.style.width = link.offsetWidth + "px"; // выставляем текущую ширину wrapper.innerHTML = newText; //изменяем текст в ссылке (это увеличит ширину дива но ширина ссылки сохранится как есть) link.style.width = wrapper.offsetWidth + "px"; //выставляем новую ширину ссылки (это запустит transition). } //просто для демонстрации const link = document.querySelector('.link'); setTimeout( ()=>changeLinkText( link, "Hello World"), 1000 ); setTimeout( ()=>changeLinkText( link, "short" ), 2000 ); setTimeout( ()=>changeLinkText( link, "long long long before end of animation"), 2100 ); setTimeout( ()=>changeLinkText( link, "short again"), 3000 ); 
     .link{ transition: width 0.25s; display: inline-block; border: 1px solid black; overflow: hidden; text-overflow: ellipsis; padding: 5px; white-space: nowrap; } .link > div{ display: inline-block; width: auto; } 
     <a class="link"><div>test</div></a>