CSS or JS transition for button that changes size from text changes?

Issue

I have an Angular app with a button that has a label of "+"

On mouse-over I call element.append(' Add a New Number'); This adds that text new to the + in the label.

Use clicks the button, new number is added, label of button is returned to "+"

I would like to animate the button size change and/or the txt label change. So far, just adding a css transition to width does nothing.

Thoughts?

UPDATE: To help clarify, this is a bootstrap input group button. I don't want to set widths or css transforms, to avoid breaking the group either here or at other screen sizes.

here are the 2 states:

I was simply letting the existing button stretch due to the injection of more words.

Solution

I think that with bootstrap CSS and Angular - it will be more complex, but this is how I would go about it programatically. You'll have to deal with the model and the data differently - and you should probably build a directive to repeat the action and integrate with Angular smoothly:

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);
    }
  });

});

I'm sure that Angular's ng-animate library watches the dom and also has an excellent way of animating things as they change in the model/controller or whatever they are calling it. This is probably something what it looks like behind the scenes.

Good luck!

jsFiddle

Answered By - sheriffderek