用於更改文本更改大小的按鈕的CSS或JS轉換？

Question

我有一個Angular應用程序，其按鈕的標簽為“+”

鼠標懸停時我調用element.append(' Add a New Number'); 這會將新文本添加到標簽中的+。

使用單擊按鈕，添加新號碼，按鈕標簽返回“+”

我想設置按鈕大小更改和/或txt標簽更改的動畫。 到目前為止，只是向width添加css過渡無效。

思考？

更新：為了幫助澄清，這是一個bootstrap輸入組按鈕。 我不想設置寬度或css變換，以避免在此處或在其他屏幕尺寸上破壞組。

這是兩個州：

由於注入了更多的單詞，我只是讓現有的按鈕拉伸。

Answer 1

我可能猜測你沒有預定義的寬度。 無論如何，你可以使用transform-origin和scale來實現這樣的效果

騙子在這里

HTML：

<button id="btn">Click</button>

CSS：

#btn {
    outline: none;
    border:none;
    background: orange;
    padding: 1em 1.5em;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
#btn:hover {
    -webkit-transform: scaleX(1.2);
    -ms-transform: scaleX(1.2);
    -o-transform: scaleX(1.2);
    transform: scaleX(1.2);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
}

你應該使用CSS變換來制作動畫，而不是像width這樣的屬性。 動畫稍微不平穩，所以你可能想要更多地處理它。

Answer 2

你有jQuery標記，所以這就是我要做的。

所有過渡。 淡化+動畫

function changeButtonText(button, text){
    // jQuery it
    $button = $(button);

    // get orinal css'es
    oooon = $button.css('text-align');
    doooo = $button.css('overflow');
    treee = $button.css('white-space');
    $button.css('text-align', 'left').css('overflow', 'hidden').css('white-space', 'nowrap');;

    // get new width first
    $tmpBtn = $button.clone().append(text).css('opacity', '0.0').appendTo('body');
    newWidth = $tmpBtn.outerWidth();
    $tmpBtn.remove();

    // now stretch the button out
    $button.animate({width: newWidth+"px"});

    // fade texts into the butt
    $button.append('<span style="display:none">'+text+'</span>');
    $btnText = $button.find('span').fadeIn('slow');

    return {
        'text-align':oooon,
        'overflow':doooo,
        'white-space':treee
    };
}

Fiddel

Answer 3

我認為使用bootstrap CSS和Angular - 它會更復雜，但這就是我將以編程方式進行的。 你必須以不同的方式處理模型和數據 - 你應該建立一個指令來重復動作並順利地與Angular集成：

HTML

<div class="thing">+ <span id="message">
    <span id='target'></span>
</span></div>

JavaScript的

$('.thing').hover( function() {
  var originalWidth = $(this).outerWidth();
  $messageHolder = $(this).find('#message');
  $target = $(this).find('#target');
  $target.text('Some helpful text');
  var targetWidth = $target.outerWidth();
  $messageHolder.animate({
    width: targetWidth
  }, {
    duration: 200,
    complete: function() {
      $messageHolder.animate({
        opacity: 1
      }, 500);
    }
  });
});

$('.thing').on('click', function() {
  $target = $(this).find('#target');
  $target.empty();
  $messageHolder = $(this).find('#message');
  $messageHolder.animate({
    opacity: 0
  }, {
    duration: 200,
    complete: function() {
      $messageHolder.animate({
        width: 0
      }, 200);
    }
  });

});

我確信Angular的動畫庫可以觀看dom，並且在模型/控制器或其他任何調用它的時候，它們都有很好的動畫方式。 這可能是它在幕后的樣子。

祝好運！

的jsfiddle