实现让箭头图标再点击之后，转动180度
image.png
首先定义两个css样式
.ion_down {
background: url("../assets/img/ion-down.svg") no-repeat;
display: block;
background-size: 100% 100%;
width: 11px;
height: 11px;
position: absolute;
right: 15px;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-ms-transition: -ms-transform 0.2s ease-out;
}
.ion_up {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
js只要让两个class来回切换就可以了，
以下是vue中的例子，实现动态class
<i class=" ion_down" :class="{ion_up:isShowIcon.product}"></i>
