切换bootstrap 3面板时如何为人字形glyphicon设置动画? [英] How to animate the chevron glyphicon when toggling a bootstrap 3 panel?
本文介绍了切换bootstrap 3面板时如何为人字形glyphicon设置动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我为包裹在bootstrap 3手风琴中的面板提供了一种可行的解决方案.
I have a working solution for a panel wrapped in an bootstrap 3 accordion.
如何通过90度旋转将人字形从>"更改为"^"的动画?
How can I animate change of the chevron state from ">" to "^" with a 90 degrees rotation?
.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>
我正在寻找一个平滑的旋转,我已经如何更改人字形的状态.
I am looking for a smooth rotation, I already how to change the chevron state.
推荐答案
您可以尝试使用 transition
和 transform:rotation()
来完成内容的更改,而无需更改内容.检查以下代码段以供参考.
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>
这篇关于切换bootstrap 3面板时如何为人字形glyphicon设置动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文