点击旋转箭头样式

实现效果：

html界面，主要通过isdown来控制箭头是上还是下

 <el-popover
      placement="bottom"
      trigger="click"
      :visible-arrow="false"
      v-model="isdown"
      popper-class="user-popover"
    >
      <div
        slot="reference"
        class="user-content"
      >
       
        <el-image
          class="user-content-icon "
          :class="[isdown?'down':'expand ']"
          style="width: 14px; height: 14px;"
          :src="require('@/assets/images/icon-down.png')"
        />
      </div>
 
      <ul class="user-list">
        <li>
         退出登录
        </li>
      </ul>
    </el-popover>
<script>
import { ref } from 'vue'
const isdown=ref(false)
 return {
     isdown
    }
 
</script>

scss

<style scoped lang="scss">
.user {
 
  .down {
    transition: all 0.3s;
    transform: rotate(180deg);
    transform-origin: center;
  }
 
  .expand {
    transition: all 0.3s;
    transform: translate(0, 2px) rotate(0deg);
    transform-origin: center;
  }
}
style>