点击箭头转向效果

本页的gif图使用的是ScreenToGif，一个我已经用了好多年的gif图工具

上效果：

如此流畅的箭头动作效果实现起来也异常简单

template部分

<div class="tab-last flex_center" @click="showYearPicker">
    历届
    <img
      src="../assets/arrow_down@2x.png"
      alt=""
      :class="[yearFlag ? 'arrow_up' : 'arrow_down']"
    />
</div>

样式部分

.arrow_down {
  width: 28px;
  height: 28px;
  transform: rotate(0deg);
  transition: transform 0.5s;
}
.arrow_up {
  width: 28px;
  height: 28px;
  transform: rotate(180deg);
  transition: transform 0.5s;
}

只要触发点击事件showYearPicker时，修改yearFlag为true/false,即可实现。

css3真的so cool!