如何在切換引導程序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