html:
CSS(1) :
css3中的动画帧将旋转
@keyframes tea_arrow {
0 % {变换3360 rotatez (180 deg )； }
25 % {变换3360 rotatez (135 deg )； }
50 % {传输3360旋转(90度)； }
75 % { transform 3360 rotatez (45度)； }
100 % {传输3360 rotatez (0deg )； }
}
@keyframes tea_arrow1 {
0 % {变换3360 rotatez (0deg )； }
25 % {传输3360旋转(45度)； }
50 % {传输3360旋转(90度)； }
75 % {变换3360 rotatez (135 deg )； }
100 % {传输3360 rotatez (180 deg )； }
}
. tea _ arrow down { animation : tea _ arrow 0.5s linear； 变换-定向3360中心； 变换： rotatez (0deg )； }
. tea _ arrow up { animation : tea _ arrow 10.5 s linear； 变换-定向3360中心； 变换： rotatez (180 deg； }
CSS(2) :
css3过渡属性旋转属性
. tea _ arrow down { transition :8 s； 变换-定向3360中心； 变换： rotatez (0deg )； }
. tea _ arrow up { transition : 0.8s； 变换-定向3360中心； 变换： rotatez (180 deg； }
jQ:
在jq中，您只需要确定是否包含发生的动画的类
~ (功能() )。
varBTN=$(.tea_getBTN )；
varanicon=$(.tea_getdetail )；
vararrow=$(.tea_arrow )；
BTN.on('click '，function ) ) }
if (！ arrow.Hasclass(tea_arrowdown )！ arrow.Hasclass(tea_arrowup ) ) }
arrow.addclass(tea_arrowup )；
} else if (arrow.hasclass (tea _ arrow up ) ) )。
arrow.removeclass(tea_arrowup ) ).add class (tea _ arrow down )；
} else if (arrow.hasclass (tea _ arrow down ) ) )。
arrow.remove class (tea _ arrow down ) ).add class (tea _ arrow up )；
}
)；
() )；