Question

我有一个按钮，里面有一些文字。按下它时，文本会发生变化。这使按钮的宽度发生变化。如果可以通过这样的方式转换元素宽度的变化，那将是很好的：

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

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

有没有人知道实现这种效果的优雅方式？ Here's a (yet-to-function) fiddle to hack away at

Answer 1

尝试使用jQuery执行此操作的this fiddle。

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

使用Maurice's answer，按钮的文字溢出到第二行，通过强制按钮的高度到原始高度来处理。相反，使用

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

内容更改导致的过渡元素大小

3 个答案: