Question

我创建了一个Bootstrap实时搜索选择器，它由jQuery添加，并在单击绿色加号按钮后由Animate.CSS设置动画。没有动画CSS，Picker就像一个魅力。不幸的是，使用Anmiate.CSS的动画类，选择器始终低于所有其他内容（参见屏幕截图）。

selectpicker由以下代码添加。在变量＆＃34;选择＆＃34;是选择值，插入选择器中。最后，初始化选择选择器。

 $('#addPosition').click(function() {
 ...
 $('#articlelist').append("<div style='margin-top: 5px;' class='animated rollIn buffer'>"+
   "<div class='row'>"+
      "<div class='col-sm-1'><button type='button' class='btn btn-danger btn-sm removePositionArticles'><span class='fa fa-minus'></span></button></div>"+
         "<div class='col-sm-8'>"+
             select+
         "</div>"+
      "<div class='col-sm-3'><input type='number' class='form-control' name='addamount[]' value=''></input></div>"+
   "</div>");

//Initialize Selectpicker
$('.selectpicker').last().selectpicker();
}

生成的HTML代码如下所示：

<div style="margin-top: 5px;" class="animated rollIn buffer">
  <div class="row"><div class="col-sm-1">
    <button type="button" class="btn btn-danger btn-sm removePositionArticles">
      <span class="fa fa-minus"></span>
    </button>
  </div>
  <div class="col-sm-8">
    <div class="btn-group bootstrap-select form-control open">
      <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Niska Teppich" aria-expanded="true">
        <span class="filter-option pull-left">Niska Teppich</span>&nbsp;
        <span class="bs-caret"><span class="caret"></span></span>
      </button>
      <div class="dropdown-menu open" style="max-height: 585.458px; overflow: hidden; min-height: 123px;">
        <div class="bs-searchbox">
          <input type="text" class="form-control" autocomplete="off">
        </div>
        <ul class="dropdown-menu inner" role="menu" style="max-height: 536.458px; overflow-y: auto; min-height: 74px;">
          <li data-original-index="0" class="selected active">
            <a tabindex="0" class="" style="" data-tokens="null">
              <span class="text">Niska Teppich</span>
              <span class="glyphicon glyphicon-ok check-mark"></span>
            </a>
          </li>
          //Further Options
        </ul>
      </div>
      <select class="form-control selectpicker" name="addarticleid[]" data-live-search="true" tabindex="-98">
        <option value="1">Niska Teppich</option>
        //Further Options
      </select>
    </div>
  </div>
  <div class="col-sm-3"><input type="number" class="form-control" name="addamount[]" value=""></div>
</div>

添加的其他元素看起来相同。按钮是＆＃34;常规＆＃34; Bootstrap类的Bootstrap按钮。我尝试使用z-Index来解决这个问题，但是它无法正常工作。

你能帮帮我吗？当然，我可以避免使用animate.css，但这不是我的最终目的： - /

Answer 1

尝试在CSS文件中添加以下内容。这应该照顾它。

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:none!important;animation-fill-mode:none!important}

来源：https://github.com/daneden/animate.css/issues/596

Animate.CSS元素落后于其他元素

1 个答案: