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

Question

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

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

当然,这仅在您明确更改width属性时有效.

有谁知道实现这种效果的优雅方式？这是一个(尚未发挥作用)的小提琴.

Answer 1

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

\n\n

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

\n