Question

我遇到下一个动画的问题，我想切换类并制作带箭头图标的动画向下旋转，当你再次点击旋转到顶部时，问题是旋转到顶部从原始位置开始，我需要保持旋转位置：

＆＃13;

var contArrow = 0;
$(document).on("click", "button.btnSort", function () {
    if(contArrow==0){
        $(this).children("i.fa-arrow-up").removeClass("rotateTop").addClass("rotateDown")
        contArrow++
    }
    else{
        $(this).children("i.fa-arrow-up").removeClass("rotateDown").addClass("rotateTop")
        contArrow--
    }
    console.log($("i").attr("class"))
})

＆＃13;

.rotateDown{
    animation: arrowAnimDown 2s linear;
    animation-fill-mode: forwards;
}

@keyframes arrowAnimDown {
    from{}
    to{
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}
.rotateTop{
    animation: arrowAnimTop 2s linear;
    animation-fill-mode: forwards;
}

@keyframes arrowAnimTop {
    from{}
    to{
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="btn btn-light btnSort">
    Click 
    <i class="fa fa-arrow-up"></i>
</button>

＆＃13;

Answer 1

您需要在第二个动画中指定初始位置，因为当您的第二个动画触发时，它将假设该元素在0处被转换并将其动画为180deg，因此请指定它from下的arrowAnimTop

var contArrow = 0;
$(document).on("click", "button.btnSort", function () {
    if(contArrow==0){
        $(this).children("i.fa-arrow-up").removeClass("rotateTop").addClass("rotateDown")
        contArrow++
    }
    else{
        $(this).children("i.fa-arrow-up").removeClass("rotateDown").addClass("rotateTop")
        contArrow--
    }
    console.log($("i").attr("class"))
})

.rotateDown {
    animation: arrowAnimDown 2s linear;
    animation-fill-mode: forwards;
}

@keyframes arrowAnimDown {
    from {}
    to {
        transform: rotate(-180deg);
    }
}
.rotateTop {
    animation: arrowAnimTop 2s linear;
    animation-fill-mode: forwards;
}

@keyframes arrowAnimTop {
    from {
      transform: rotate(-180deg);
    }
    to {
      transform: rotate(0); /* read ahead for alternate animation */
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="btn btn-light btnSort">
    Click 
    <i class="fa fa-arrow-up"></i>
</button>

替代动画，您可以将其拉到-360deg

@keyframes arrowAnimTop {
    from {
      transform: rotate(-180deg);
    }
    to {
      transform: rotate(-360deg);
    }
}

Answer 2

从{}值向arrowAnimTop添加一些开始位置，并将其设置为{}值以回归零：

.rotateDown{
    animation: arrowAnimDown 2s linear;
    animation-fill-mode: forwards;
}

@keyframes arrowAnimDown {
    from{}
    to{
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}
.rotateTop{
    animation: arrowAnimTop 2s linear;
    animation-fill-mode: forwards;
}

@keyframes arrowAnimTop {
    from{
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
  }
    to{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

Codepen example

Css，动画后保持旋转位置

2 个答案: