css3+jq--小箭頭旋轉180度案例

html:

<aside class="tea_getBtn">
      <div class="w">
          <span class="displayB fl font_1">得茶說明</span>
          <span class="displayB fr tea_arrow"><img class="mI_img1" src="img/tea/tea_arrowDown.png" alt=""></span>
      </div>
</aside>

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");
            }
        });
    })();