Javascript 有没有办法在输入框中设置从文本左对齐到中心的过渡动画

小提琴：

html:

js:

---

现在，只要单击，文本就会捕捉到中心。我试过了，但什么也没发生。有没有一种方法可以在不捕捉的情况下为从文本左对齐到中心的平滑过渡设置动画？

实现这一点的唯一真正方法是通过一些时髦的幕后魔术，使用一个模拟输入中文本的临时元素

下面是一个工作示例：

---

请记住，您必须将临时元素的字体大小、字体和字母间距设置为与输入框相同的样式，否则它将无法移动到精确的中心。

这是一个老问题，但我最近遇到了同样的问题，并发现这里的答案错误且不令人满意

• 您可以使用纯CSS设置动画（3）
• 您甚至可以使用硬件加速的

  transform:translate（）

  技术

这是我的解决方案：

setTimeout（函数（）{
$（'.b'）.addClass（'left'）；
}, 5000);
.b{
转化：translateX（50%）；
转换：转换为输入输出1000ms；
}
c{
显示：内联块；
转化：translateX（-50%）；
背景：绿色；
转换：转换为输入输出1000ms；
}
b.左，
b.左{
转化：translateX（0%）；
}

居中文本
no，因为right、left、justify和center不是数字
<input id = 'box' value = 'some text'/>

#box {
    text-align:left;
}

$('#box').on('click', function() {
    $(this).css({'textAlign':'center'}, 500);
});

$('#box').on('focus', function () {
    var full_width = $(this).width();
    var t = document.createElement('span');
    t.innerHTML = $(this).val();
    t.style.visibility = 'hidden';
    document.body.appendChild(t);
    var text_width = $(t).width();
    document.body.removeChild(t);
    $(this).animate({
        'text-indent': (full_width - text_width) / 2
    });
});