Есть ли способ, чтобы оживить переход от выравнивания текста слева центрирования в поле ввода

Question

скрипку: http://jsfiddle.net/p7gFh/

HTML:

<input id = 'box' value = 'some text'/> 

Css:

#box { 
    text-align:left; 
} 

ЯШ:

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

Право теперь текст просто щелкнет по центру нажатием. Я попробовал .animate(), но ничего не произошло. Есть ли способ анимировать плавный переход от текстового выравнивания влево до центра без привязки?

Answer 1

Единственный реальный способ добиться этого - через какую-то фанки за кулисами магию, используя временный элемент, который имитирует текст внутри ввода.

Вот рабочий пример: http://jsfiddle.net/xLg93/

$('#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 
    }); 
}); 

Имейте в виду, вы будете иметь, чтобы стиль размера шрифта для временного элемента, шрифта лицо и письмо-интервал, чтобы быть идентичным поле ввода, в противном случае это не будет анимировать точный центр.

Answer 2

Это старый вопрос, но у меня недавно была такая же проблема и нашла ответ здесь неправильно и неудовлетворительно.

• Вы можете анимировать его с помощью чистого CSS (3)
• Вы даже может использовать аппаратное ускорение transform: translate() технику он

Это мое решение:

setTimeout(function() { 
 
    $('.b').addClass('left'); 
 
}, 5000);

.b { 
 
    transform: translateX(50%); 
 
    transition: transform ease-in-out 1000ms; 
 
} 
 
.c { 
 
    display: inline-block; 
 
    transform: translateX(-50%); 
 
    background: green; 
 
    transition: transform ease-in-out 1000ms; 
 
} 
 
.b.left, 
 
.b.left .c { 
 
    transform: translateX(0%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="b"> 
 
    <div class="c">CENTERED TEXT</div> 
 
</div>