Question

我有一个Angular应用程序，其按钮的标签为＆＃34; +＆＃34;

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

使用点击按钮，添加新号码，按钮标签返回＆＃34; +＆＃34;

我想设置按钮大小更改和/或txt标签更改的动画。到目前为止，只需向width添加css转换即可。

思想？

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

这是两个州：

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

Answer 1

我可能猜测你没有预定义的宽度。无论如何，您可以使用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这样的属性。动画稍微不平稳，所以你可能想要更多地处理它。

Answer 2

你有jQuery标记，所以我就是这样做的。

所有过渡。淡化+动画

Template.hello.helpers({
   isTrue() { return true }
});

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

用于更改文本更改大小的按钮的CSS或JS转换？

3 个答案:

HTML

的JavaScript