如何在切换Bootstrap 3面板时为Chevron Glyphicon添加动画效果？

Question

我有一个在Bootstrap 3手风琴中的面板的工作解决方案。

如何通过90度旋转来动画改变chevron状态从">"到"^"？

.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}

.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#importationCollapse">Importation</a>
            </h3>
        </div>
        <div id="importationCollapse" class="panel-collapse collapse in">
            <div class="panel-body">
            <p>Content: blahblah</p>
            </div>
        </div>
    </div>
</div>

[编辑] 我想要一个流畅的旋转效果，我已经知道如何改变chevron状态。

- Natalie Perret

Answer 1

你可以简单地替换。

.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080";
}

以下是相关内容：

.panel-heading .accordion-toggle.collapsed:after {
    transform: rotateX(180deg);
}

使用另一个字符不如这样做更好。 在Codepen上的演示

要使旋转动画生效，您可以添加以下内容

.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
    transition: transform 0.5s;
    transform-origin: 8px 7px;
}

并且要绕Z轴旋转

.panel-heading .accordion-toggle.collapsed:after {
    transform: rotateZ(180deg);
}

您可以尝试使用transform-origin来实现所需的效果。

在Codepen上查看示例

- Abhilash Nayak

---

这不是我想要的。我的代码运行正常，只是我想要一个平滑的过渡，在CSS中旋转似乎有点棘手。 - Natalie Perret

你想要哪种过渡效果？淡入淡出？还是在Z轴上平滑旋转？ - Abhilash Nayak

Answer 2

Instead of changing content you can try with transition and transform: rotate() to get it done. check below snippet for reference.

.panel-heading .accordion-toggle:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: right;
  color: grey;
  transition: all 0.5s ease;
}

.panel-heading .accordion-toggle.collapsed:after {
  /*content: "\e080";*/
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#importationCollapse">Importation</a>
      </h3>
    </div>
    <div id="importationCollapse" class="panel-collapse collapse in">
      <div class="panel-body">
        <p>Content: blahblah</p>
      </div>
    </div>
  </div>
</div>

- RaJesh RiJo