[英]Animating Bootstrap glyphicons
I am using the bootstrap glyphicon-triangle-left
and glyphicon-triangle-bottom
glyphicons in a bootstrap accordion. 我在bootstrap
glyphicon-triangle-left
使用bootstrap glyphicon-triangle-left
和glyphicon-triangle-bottom
glyphicons。 When you open up a div it shows the bottom
one and when you close it, it shows the left
one. 当你打开一个div时它会显示一个
bottom
,当你关闭它时,它会显示left
一个。
When the icons switch classes it looks a little stupid so I want to create a transition maybe make the icon rotate or fade out/in. 当图标切换类时,它看起来有点愚蠢,所以我想创建一个过渡可能使图标旋转或淡出/进入。 But I am not sure how I can do this since I toggle between classes via jQuery like so:
但我不知道我怎么能这样做,因为我通过jQuery在类之间切换如下:
function toggleChevron(e) {
jQuery(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-triangle-bottom glyphicon-triangle-left');
}
I am not sure how I can do this because it uses the classes from the bootstrap accordion etc. 我不知道如何做到这一点,因为它使用了自举手风琴等的类。
I've tried doing something like this in my css file but it's not really doing what I want it to do :p 我已经尝试在我的css文件中做这样的事情,但它并没有真正做我想要它做的事:p
.glyphicon-triangle-bottom{
opacity: 0;
transition: opacity 1s;
}
.glyphicon-triangle-left{
opacity: 1;
transition: opacity 1s;
}
Anyone had any idea how I can make the icons transition? 任何人都知道如何让图标过渡? Many thanks in advance!!
提前谢谢了!!
EDIT: I customized this code a bit but this a good representation of what my accordion looks like: http://jsfiddle.net/zessx/r6eaw/12/ 编辑:我对这段代码进行了一些定制,但这很好地反映了我的手风琴的样子: http : //jsfiddle.net/zessx/r6eaw/12/
Instead of adding a new glyphicon you can rotate the existing left one to bottom. 您可以将现有的左侧一个旋转到底部,而不是添加新的glyphicon。
Like this: 像这样:
.glyphicon-triangle-left{
transition: transform .3s ease-in;
}
.glyphicon-triangle-left.rotate-90{
transform:rotate(90deg);
}
Then toggle the rotate-90
class on click. 然后在点击时切换
rotate-90
类。
See this mashup of the info above. 请参阅上面信息的mashup。 I think it is what you are looking for if you are dealing with a bootstrap accordian.
我认为如果你正在处理一个引导手风琴,那就是你要找的东西。
Working Accordion JSFiddle 工作手风琴JSFiddle
updated js to 更新js到
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('rotate-180');
}
$('#accordion').on('hide.bs.collapse', toggleChevron);
$('#accordion').on('show.bs.collapse', toggleChevron);
and css to 和css
.glyphicon-chevron-down{
transition:transform 180ms ease-in;
}
.glyphicon-chevron-down.rotate-180{
transform: rotate(180deg);
transition:transform 180ms ease-in;
}
.glyphicon-chevron-up{
transition:transform 180ms ease-in;
}
.glyphicon-chevron-up.rotate-180{
transform: rotate(180deg);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.