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