<!-- 点击 vue实现点击图标，图标在2s中完成旋转
1==》如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态
transition: all 2s; 动画运动时间

2--》点击的时候就添加效果，用三目结算结合v-bind， 变量不加引号 类名添加

3==》不要删除aa,因为当你再次点击的时候，aa类会在2s类变成原来的状态仍然有动画

原地址==》https://segmentfault.com/q/1010000012328749/a-1020000012329601

  1. <title></title>
  2.         <!-- 引入样式 -->
  3.         <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  4.         <!-- 引入组件库 -->
  5.         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
  6.         <!-- 引入Vue -->
  7.         <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  8.         <style>
  9.             .aa {
  10.                 transition: all 2s;
  11.             }
  12.  
  13.             .go {
  14.                 transform: rotate(-180deg);
  15.                 transition: all 2s;
  16.             }
  17.         </style>
  18.  
  19.     </head>
  20.     <body>
  21.         <div id="app">
  22.             <div>
  23.                 <i :class="[rotate?  'el-icon-arrow-left go' : ' el-icon-arrow-left aa' ]" @click="start"></i>
  24.             </div>
  25.  
  26.         </div>
  27.  
  28.         <script>
  29.             var app = new Vue({
  30.                 el: '#app',
  31.                 data() {
  32.                     return {
  33.                         rotate: false
  34.                     }
  35.                 },
  36.                 methods: {
  37.                     start() {
  38.                         this.rotate = !this.rotate;
  39.                         console.log(this.rotate)
  40.                     }
  41.                 }
  42.             })
  43.         </script>

vue实现点击图标，图标在2s中完成旋转的更多相关文章

  1. 正在运行的android程序，按home键之后退回到桌面，在次点击程序图标避免再次重新启动程序解决办法

    正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法 例如:一个android程序包含两个Activity,分别为MainActivity和Other ...

  2. android 点击桌面图标，打开手机浏览器进入对应的站点

    做一个假的adnroid app.要实现点击桌面图标.打开手机浏览器进入对应的站点,实现方法非常easy import android.app.Activity; import android.con ...

  3. vue设置title和ioc图标

    vue设置ioc图标和title 1.ioc图标设置 在根目录中的index.html中引入代码: <link rel="shortcut icon" type=" ...

  4. WIN10环境下点击通知栏图标时自动切换输入法导致图标位置变动

    这个问题由来已久,每当点击系统右下角任务栏中的按钮时,原本是搜狗输入法就会自动变成“US [ 中文(简体,中国) ]”,图标会自动错位,导致响应的是其他功能. 假设上图是正常的环境,此时我点击电池图标 ...

  5. 【Windows】快速启动软件 非点击软件图标 无限弹窗

    1. 添加系统路径 单独新建文件夹A用于存放待快速启动的软件的快捷方式图标,复制文件夹A的路径-> 右击windows shell中此电脑->属性->高级系统设置->环境变量- ...

  6. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  7. ztree树形图自定义图标在jeecg框架中不显示

    有时候工作遇到问题,就会硬着头皮去解决,今天给大家说一个ztree树形图自定义图标在jeecg框架中不显示的解决方法 对于这个问题,官方观法说法是在节点元素中加入icon的字段,然后后跟图标的url, ...

  8. vue验证码点击更新

    vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...

  9. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

随机推荐

  1. maven配置本地和远程仓库

    maven项目中我们不用挨个导入jar包,那这些Jar包从哪里来呢?当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库 ...

  2. Python进阶基础学习(多线程)

    Python进阶学习笔记(一) threading模块 threading.thread(target = (函数)) 负责定义子线程对象 threading.enumerate() 负责查看子线程对 ...

  3. RabbitMQ学习笔记（六、RabbitMQ进阶）

    目录: 性能 存储机制 内存及磁盘告警 性能: 影响RabbitMQ性能的因素有很多,主要的分为硬件性能与软件性能. )硬件性能:如网络.内存.CPU等等. )软件性能:消息持久化.消息确认.路由算法 ...

  4. Apriori关联分析详解

    ------------恢复内容开始------------ 一. Apriori关联分析概述 选择物品之间的关联规则也就是要找出物品之间的关系,要找到这种关系有两步 找出频繁一起出现的物品集的集合, ...

  5. WPF 精修篇 样式继承

    原文:WPF 精修篇 样式继承 这个 是新知识 样式可以继承 <Style x:Key="TextBlockStyleBase" TargetType="{x:Ty ...

  6. CF1244C The Football Season

    题目链接 problem 给定\(n,p,w,d\),求解任意一对\((x,y)\)满足\[xw+yd=p\\ x + y \le n\] \(1\le n\le 10^{12},0\le p\le ...

  7. 利用re处理数据

    re模块为Python提供正则表达式功能,我们可以用它来处理数据 大多数时候我们用Python读取文件数据读进来都是字符串,想要提取里面想要的数据用正则表达式是个很不错的手段 下面是一个从读取数据中提 ...

  8. Salesforce 开发整理（一）测试类最佳实践

    在Sales force开发中完善测试类是开发者必经的一个环节,代码的部署需要保证至少75%的覆盖率,那么该如何写好测试类呢. 测试类定义格式如下: @isTest private class MyT ...

  9. 曾Python培训讲师-2年Python开发无包装简历-20191217-可公开

    目录 个人介绍 技能介绍 项目经历 自我评价 简历非完整版,需要完整版看下述信息,禁止任何一切私人用途.转发 我生日是27号,那就27元一份,有需求的来购买!只会涨价不会降价,大概卖10份涨1元:曾P ...

  10. 0x00007FFC8C5325E7 (ucrtbased.dll)处(位于 DataStructure.exe 中)引发的异常: 0xC0000005: 读取位置 0xFFFFFFFFFFFFFFFF 时发生访问冲突。

    此处为非“%s” 类型数据以“%s”类型打印错误. 需要仔细检查代码中数据类型错误.