javascript - 内容变化引起的过渡元素大小

Question

我有一个按钮，里面有一些文字。当你按下它时，文本会改变。这使得按钮的宽度发生变化。如果可以通过以下方式转换元素宽度的变化，那就太好了：

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

当然，这仅在您明确更改width属性时才有效。

有谁知道实现这种效果的优雅方法？这是一个（尚未起作用的）小提琴来破解.

Answer 1

试试这个使用 jQuery 完成的小提琴。

$('button').click(function() {
    var width = $(this).css('width');
    var height = $(this).css('height');
    $(this).html('Hello, World!');
    var newWidth = $(this).css('width');
    $(this).css({'width': width, 'height': height});
    $(this).animate({'width': newWidth}, 1000);
});​

Answer 2

随着莫里斯的回答，按钮的文本溢出到第二行，这是通过强制按钮的高度到其原始高度来解决的。相反，使用

button {
    white-space: nowrap;
}

以便按钮的文本保持在一行并在转换时显示。然后代码不再需要处理按钮的高度，因此它可以变得更简单：

$('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 3

我想这是不可能的，因为浏览器无法获得准确的目标宽度；假设它在转换之前获得了值，但此时按钮已经到达宽度！也许这种转变存在，我们看不到。所以你需要一个初始宽度，你也需要知道目标宽度，我们 js