jquery - Css，动画后保持旋转位置

Question

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

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{
        -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);
    }
}

<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>

Answer 1

您需要在您的第二个动画中指定初始位置，因为当您的第二个动画触发时，它会假定元素在 0 处变换并将其设置为 180deg，所以在arrowAnimTop

的 from下指定

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