css3+jq--小箭头旋转180度案例

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只是判断一下是否包含所发生动画的类
    ~(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");
    })();

推荐文章

睿智的弓箭 · ipatool run error on M1 · Issue #43 · majd/ipatool · GitHub

2 月前

千年单身的闹钟 · Datagrip 下载、安装教程，详细图文，亲测有效_datagrip下载-CSDN博客

4 月前

文雅的沙滩裤 · Navigator：canShare() 方法 - Web API | MDN

8 月前

奔放的竹笋 · 国际经济法网--中国国际经济法学会官方站点

1 年前

英勇无比的核桃 · 深入解析go依赖注入库go.uber.org/fx_go uber fix.module-CSDN博客

1 年前