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

Angular/animate Bootstrap elements (input groups)

本文关键字：输入 元素 动画 角度      更新时间：2023-09-26

Plunkr 在这里

绝对不是 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>

风格

.animate-hide {
  -webkit-transition: all linear 0.75s;
  -o-transition: all linear 0.75s;
  transition: all linear 0.75s;
}
.animate-hide.ng-hide {
  width: 0;
}
.glyphicon-flag {
  color: #d9534f !important;
}

动画完成时除了按钮扩展之外的所有内容都很好用。

问题是input-group-addon的 CSS display 属性被设置为由 Bootstrap table-cell。动画完成后，输入将被隐藏，这使得标志图标展开以占用所有剩余空间。您可以通过多种方式解决此问题，一个简单的选择是在输入后添加一个空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：http://plnkr.co/edit/qPvbXtEUzvWfsZPkmVRq?p=preview

相关文章：