javascript - CSS/JS : Animate Inline Element Upon Text Change

Question

当 inline 元素的文本发生变化时，通常情况下其计算的 width 或 height 也会发生变化。

通常使用 CSS 更改 transition 属性是微不足道的，例如，添加一个 transition 来更改元素的 background-color悬停。

但是，内联 元素尺寸确实很棘手。一个简单的 transition 属性不会为计算的 width 的变化设置动画。

单击此处查看示例:https://jsfiddle.net/mz103/59s42ys4/或在下面查看:

$("div").on("click", function() {
	$(this).text("Although my width changes, it is not aniamted.");
});

div {
	display: inline-block;
	background-color: red;
	padding: 8px 16px;
	
	transition: width 0.3s; // Notice, this doesn't transition the width upon change.
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click me.</div>

当 inline 元素的文本发生变化时，我们如何为这些变化设置动画？

Answer 1

此处更新:https://jsfiddle.net/ky3c5Lec/3/

$("div").on("click", function() {
    //get the current Dimensions, as Start-value for the animation
    var $this = $(this),
        sw = $this.width(),
        sh = $this.height();

    $this.text("New text");
    var tw = $this.width(),
        th = $this.height();

    $this.css({
        //since jQuery.animate() doesn't have sth. like Tween.from() 
        //we have to reset the styles to the initial values
        width: sw, height: sh
    }).animate({
        //and then animate 
        width: tw, height: th
    }, function(){
        //and when the animation is done, we clean up after ourselves
        $this.css({
            width: "", height: ""
        });
    })
});