首页 > 其他分享 >点击下拉旋转,二次点击恢复(vue写法)

点击下拉旋转,二次点击恢复(vue写法)

时间:2022-12-08 17:03:03浏览次数:40  
标签:vue linear 0.25 transition transform 点击 写法

/* 动画 */
.downIcon {
  transform: rotate(0deg) !important;
  -webkit-transition: transform 0.25s linear;
  -moz-transition: transform 0.25s linear;
  -o-transition: transform 0.25s linear;
  transition: transform 0.25s linear;
}
.iconTrans {
  transform: rotate(180deg) !important;
  -webkit-transition: transform 0.25s linear;
  -moz-transition: transform 0.25s linear;
  -o-transition: transform 0.25s linear;
  transition: transform 0.25s linear;
}
 <img src="./img/icon-down.svg" :class="{ downIcon: true, iconTrans: this.isShowOption1 }"/>

 

标签:vue,linear,0.25,transition,transform,点击,写法
From: https://www.cnblogs.com/qdyzhuang/p/16966582.html

相关文章

  • vue 带箭头下拉框
    css代码.droplist-content{display:flex;flex-direction:column;font-size:0.12rem;font-family:PingFangSC-Regular,PingFangSC;font-weight:400;c......
  • vuex中的this.$store.commit...
    Vue的项目中,如果项目简单,父子组件之间的数据传递可以使用 props或者$emit等方式进行传递但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并......
  • vue2 插槽20 slot 作用域插槽 具名插槽
    vue官方规定:每一个slot插槽,都要有一个name名称如果省略了slot的name属性,则有一个默认名称叫做default组件中使用:<slotname="default"><h6>这是def......
  • k8s+harbor部署jar包和vue项目
    前置工作:k8s部署docker镜像需要拉取docker镜像,一般企业都是使用的局域网,所以需要在本地搭建一个docker私有仓库。​​将jar包、vue项目打成docker镜像并推送到Harbor本地......
  • 将jar包、vue项目打成docker镜像并推送到Harbor本地仓库
    ​​Centos7下harbor的安装部署​​先制作自己的docker镜像,使用commit方式也可以制作镜像,我这里采用通过编写Dockerfile命令脚本进行生成镜像。​​利用Dockerfile制作自己......
  • Vue动态增添表单并赋予增删上下移动等操作
    Vue动态增添表单并赋予增删上下移动等操作开发需求:前端设计一个表单,依据题目类型,判断是否需要添加内容,若需添加,则可以动态增删、上下移动调整顺序等开发难点:需根据实际逻......
  • vue3 el-pagination 将 英文 修改 为 中文
    当前视图:我要做的是将Total类似的英文改为中文 1. 在组件里引入 ElConfigProvider组件和中文包//ElConfigProvider组件import{ElConfigProvider}f......
  • 点击劫持:潜在有害的网页浏览器漏洞利用
    Clickjacking:PotentiallyharmfulWebbrowserexploit点击劫持:潜在有害的网页浏览器漏洞利用 Author:MichaelKassner作者:MichaelKassner 翻译:endurer,2008-11-19第......
  • vue table表格实现无缝滚动 鼠标进入可悬停
    <el-tableref="table":data="tableData":header-cell-style="{background:'#F0F2F7',colo......
  • Vue3中 v-model 语法糖运用
    一、介绍在Vue2.0发布后,开发者使用v-model指令时必须使用名为value的prop。如果开发者出于不同的目的需要使用其他的prop,就不得不使用v-bind.sync。此外,由于v-mo......