Javascript 角度/动画引导元素（输入组）

在这儿吗

绝对不是CSS转换/大师，但我正在尝试在输入中单击图标幻灯片。我有这个工作，但一旦动画完成我的图标爆炸到包含div的宽度，我不知道为什么

加价

  <form class="form">
    <div class="input-group col-sm-5">
      <span class="btn btn-default input-group-addon" ng-click="hideInput = !hideInput">
          <span class="glyphicon glyphicon-flag"></span>
      </span>
      <input class="form-control animate-hide" ng-hide="hideInput" />
    </div>
  </form>

---

动画完成时，除了按钮扩展之外，其他一切都很好。

问题是

输入组加载项的CSS
display
属性通过引导设置为
表格单元格。动画完成后，输入将隐藏，这将使标志图标展开以占用所有剩余空间。您可以通过多种方式解决此问题，一个简单的选项是在输入后添加一个空的
span
。例如：

<form class="form">
  <div class="input-group col-sm-5">
    <span class="btn btn-default input-group-addon" ng-click="hideInput = !hideInput">
      <span class="glyphicon glyphicon-flag"></span>
    </span>
    <input class="form-control animate-hide" ng-hide="hideInput" />
    <span></span>
  </div>
</form>



这里的示例plunker:
你赢了我：）不过我想改变的一件事是，不用a，而是用a。这样，您就有了一个块级元素，可以将height属性设置为与引导输入的高度相匹配。这是我的实现：@JoshTaylor这是一个很好的调用，我只是在中添加了任何旧元素来演示问题和解决方案。@DavidG@JoshTaylor非常好的建议，谢谢你们两位。我结合了这两种技术并添加了
填充：6px 0以防止输入在动画结束时“捕捉”关闭。最后一击：
<form class="form">
  <div class="input-group col-sm-5">
    <span class="btn btn-default input-group-addon" ng-click="hideInput = !hideInput">
      <span class="glyphicon glyphicon-flag"></span>
    </span>
    <input class="form-control animate-hide" ng-hide="hideInput" />
    <span></span>
  </div>
</form>