由内容更改引起的过渡元素大小 [英] Transition element size caused by content changes

问题描述

我有一个按钮，其中有一些文本。当您按下它，文本更改。这使得按钮的宽度改变。如果可以用下面这样的方式转换元素宽度的变化，这将是巨大的：

I have a button that has some text in it. When you press it, the text changes. This makes the button's width change. It would be great if one could transition the change of an element's width with something like this:

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

当然，只有当你明确更改 width 属性。

Of course, that only works when you explicitly change the width property.

有没有人知道优雅 这是一个（尚未起作用的）小提示，以便在处进行攻击。

Does anyone know of an elegant way to achieve this effect? Here's a (yet-to-function) fiddle to hack away at.

推荐答案

尝试这个小提示它使用jQuery。

Try this fiddle that does it using 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);
});​

这篇关于由内容更改引起的过渡元素大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！