jquery - 将动画添加到自举 Accordion 中，同时保持适当的加减号

Question

我看到其他示例没有什么问题，当您在 Accordion 上双击或快速单击两次时，面板会展开，但加号和减号会变回加号而不是减号。例如这个链接:https://jsfiddle.net/esedic/mhu8rj3e/

实际问题

无论如何，我的加减号不会发生，但我没有动画/过渡。如何使用下面的代码片段向我的 bootstrap Accordion 添加动画/过渡？您注意到盒子膨胀得太快了。

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle(100);
});

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

如果你想给加号/减号添加一些动画，你可以使用transition。将 ::after 复制为 ::before 并使用 transform 旋转它。

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle();
});

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\2212';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

button.accordion:before {
    content: '\2212';
    color: #777;
    font-weight: bold;
    font-size: 22px;
    position: absolute;
    right: 18px;
    transform: rotate(0deg);
    transition: .3s all ease;
}

button.accordion.active:before {
    content: "\2212";
    transform: rotate(90deg);
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>