css3+jq--小箭头旋转180度案例
作者：x深藏的爱x_402 | 来源：互联网 | 2023-05-17 09:57
html:<aside><div><spanclassdisp
html:
class="tea_getBtn">
class="w">
class="displayB fl font_1">得茶说明
class="displayB fr tea_arrow"> class="mI_img1" src="img/tea/tea_arrowDown.png" alt="">
css(1):
css3的动画帧实现旋转
@keyframes tea_arrow {
0%{transform: rotateZ(180deg);}
25%{transform: rotateZ(135deg);}
50%{transform: rotateZ(90deg);}
75%{transform: rotateZ(45deg);}
100%{transform: rotateZ(0deg);}
}
@keyframes tea_arrow1 {
0%{transform: rotateZ(0deg);}
25%{transform: rotateZ(45deg);}
50%{transform: rotateZ(90deg);}
75%{transform: rotateZ(135deg);}
100%{transform: rotateZ(180deg);}
}
.tea_arrowDown{animation: tea_arrow 0.5s linear;transform-origin:center center;transform: rotateZ(0deg);}
.tea_arrowUp{animation: tea_arrow1 0.5s linear;transform-origin:center center;transform: rotateZ(180deg);}
css(2):
css3过渡属性加旋转属性
.tea_arrowDown{transition: 0.8s;transform-origin:center center;transform: rotateZ(0deg);}
.tea_arrowUp{transition: 0.8s;transform-origin:center center;transform: rotateZ(180deg);}
jQ:
用jq只是判断一下是否包含所发生动画的类
~(function() {
var btn = $(".tea_getBtn");
var aniCon = $(".tea_getDetail");
var arrow = $(".tea_arrow");
btn.on("click",function() {
if(!arrow.hasClass("tea_arrowDown") && !arrow.hasClass("tea_arrowUp") ) {
arrow.addClass("tea_arrowUp");
}else if(arrow.hasClass("tea_arrowUp") ){
arrow.removeClass("tea_arrowUp").addClass("tea_arrowDown");
}else if(arrow.hasClass("tea_arrowDown") ){
arrow.removeClass("tea_arrowDown").addClass("tea_arrowUp");
}
});
})();
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有