實(shí)現(xiàn)讓箭頭圖標(biāo)再點(diǎn)擊之后，轉(zhuǎn)動(dòng)180度
image.png
首先定義兩個(gè)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只要讓兩個(gè)class來回切換就可以了，
以下是vue中的例子，實(shí)現(xiàn)動(dòng)態(tài)class
<i class=" ion_down" :class="{ion_up:isShowIcon.product}"></i>
