css3展开隐藏箭头图标动画

实现让箭头图标再点击之后，转动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>