如何在切换引导程序3面板时动画雪佛龙图形？

Question

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

如何在90度旋转的情况下将V形状态的变化从“>”变为“^”？

.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>

[编辑] 我找一个平稳的旋转，我已经如何改变字形状态。

Answer 1

除了更改内容，您可以用transition和transform: rotate()尽量的把它完成。检查下面的代码片段以供参考。

.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>

Answer 2

您只需更换

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

用下面

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

这应该做的伎俩，而不是使用其它字符。 Demo on 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实验，以获得您想要的结果旋转。

Demo on Codepen