css样式,点击 箭头方向上下转换

实现效果:

点击切换箭头方向

实现代码

html 复制代码
    <div
      class="modelPart"
      @click="showClick"
    >
      <div class="modelPart_left">
        <img
          :src=aidefalutIcon
          class="sNodeIcon"
        >
        <div>{{ selectModel }}</div>
        <div class="chatText">CHAT</div>
      </div>
      <span :class="dropdown==true?'expand':'down'"
           class="arrow"></span>
    </div>
javascript 复制代码
<script setup>
     import { useI18n } from 'vue-i18n';
     const { t } = useI18n();
     import { onMounted, ref, watch } from 'vue'
     const dropdown = ref(false)
     // 点击事件
     function showClick () {
         dropdown.value = !dropdown.value
     }
</script>
css 复制代码
  .arrow {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    margin-left: 9px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
   
  }
  .down{
   transform: rotate(225deg);
   transform-origin: center;
   transition: all 0.3s;
}
  .expand {
    transform: translate(0, 2px) rotate(45deg);
    transform-origin: center;
    transition: all 0.3s;
 }
相关推荐
yqcoder4 分钟前
NPM 包管理问题汇总
前端·npm·node.js
程序菜鸟营10 分钟前
nvm安装详细教程(安装nvm、node、npm、cnpm、yarn及环境变量配置)
前端·npm·node.js
bsr198321 分钟前
前端路由的hash模式和history模式
前端·history·hash·路由模式
杨过姑父1 小时前
ES6 简单练习笔记--变量申明
前端·笔记·es6
Sunny_lxm1 小时前
<keep-alive> <component ></component> </keep-alive>缓存的组件实现组件,实现组件切换时每次都执行指定方法
前端·缓存·component·active
咔咔库奇2 小时前
【TypeScript】命名空间、模块、声明文件
前端·javascript·typescript
兩尛2 小时前
订单状态定时处理、来单提醒和客户催单(day10)
java·前端·数据库
又迷茫了3 小时前
vue + element-ui 组件样式缺失导致没有效果
前端·javascript·vue.js
哇哦Q3 小时前
原生HTML集合
前端·javascript·html
SoWhat~3 小时前
随遇随记篇
前端·javascript