CSS3 + jQuery点击使箭头旋转

使用transition和transform:rotate(）来实现点击箭头让他转动一定的角度。

  <i class="fas fa-chevron-right setfont right1" ></i>  

.right1{
    margin-right: 0px;
    margin-left: 37px;
    transition: all 0.3s ease-out; 
    transform: rotate(0deg);  
}

.right2{
    transition: all 0.3s ease-out;   
    margin-right: 0px;
    margin-left: 37px;
    transform: rotate(90deg);
}

起初打算使用toggleClass来进行变化，但是角度改变了却没有实现transition的动画效果。（也不知道为什么）

$(".right1").toggleClass("right2")

后来换了一下变化的姿势。。。。改用直接通过对css的更改确成功了（同样一脸懵比。。）

  $(".right1").css("transform","rotate(90deg)")

先记录一下这个坑、、、、有哪位大佬知道的还希望可以给解释一下哈哈哈