按钮的 CSS 或 JS 转换从文本更改改变大小？

Question

我有一个带有“+”标签的按钮的 Angular 应用程序

在鼠标悬停时我调用element.append(' Add a New Number'); 这会将新文本添加到标签中的 + 中。

使用点击按钮，添加新数字，按钮标签返回“+”

我想为按钮大小更改和/或 txt 标签更改设置动画。到目前为止，只是向width 添加一个 css 过渡没有任何作用。

想法？

更新： 为了帮助澄清，这是一个引导输入组按钮。我不想设置宽度或 css 转换，以避免在此处或其他屏幕尺寸处破坏组。

这里有两种状态：

由于注入了更多的单词，我只是让现有的按钮伸展。

Answer 1

你已经标记了 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
    };
}

Fiddle

Answer 2

我认为使用 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 的 ng-animate 库会监视 dom，并且当它们在模型/控制器或它们所称的任何东西中发生变化时，它也有一种很好的动画方式。这可能是它在幕后的样子。

祝你好运！

jsFiddle

Answer 3

我可能猜你没有预定义的宽度。无论如何你可以使用transform-origin 和scale 来达到这样的效果

FIDDLE HERE

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 这样的属性。动画有点生涩，所以你可能想多做一点。