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

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

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

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

<title></title>

        <!-- 引入样式 -->

        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

        <!-- 引入组件库 -->

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

        <!-- 引入Vue -->

        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

        <style>

            .aa {

                transition: all 2s;

            }

            .go {

                transform: rotate(-180deg);

                transition: all 2s;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <div>

                <i :class="[rotate?  'el-icon-arrow-left go' : ' el-icon-arrow-left aa' ]" @click="start"></i>

            </div>

        </div>

        <script>

            var app = new Vue({

                el: '#app',

                data() {

                    return {

                        rotate: false

                    }

                },

                methods: {

                    start() {

                        this.rotate = !this.rotate;

                        console.log(this.rotate)

                    }

                }

            })

        </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. 记录SqlServer安装后局域网无法连接

    ,如果安装的时候 已经选择 “混合模式(SQL Server 身份验证和Windows 身份验证)(M)”, 并且已经为 SQL Server 系统管理员分配了账户和密码 则不用重新配置. 配置方法如 ...

  2. 实时同步sersync实战

    目录 实时同步sersync实战 什么是实时同步 sersync和rsync+inotify对比 sersync项目实战 安装rsync的服务端(backup) NFS服务端部署sersync 实时同 ...

  3. Undo 相关的等待事件和已知问题 (Doc ID 1575701.1)

    Undo Related Wait Events & Known Issues (Doc ID 1575701.1) APPLIES TO: Oracle Database - Enterpr ...

  4. configparser读取配置文件时的相对路径问题

    学习接口测试时,当我把配置文件xx.config和读取配置文件的模块read_config.py放在项目下的同一个包config里时,只需传入文件名xx.config即可实现对配置文件的读取. 但是当 ...

  5. C++ 堆&栈等的说明

    Stack 堆 存在于某作用域内的一块空间.说白了就是函数产生的空间,用于存放函数的变量.返回地址. 在函数体中声明的局部变量,就时存储在Stack中. Heap 栈 由操作系统提供的全局空间.在程序 ...

  6. cartographer 3D scan matching 理解

    cartographer 3D scan matching没有论文和其它资料,因此尝试通过源码理解其处理方法,理解不当之处还请指正. 目录: 0.2D 匹配方法简介 1.real time corre ...

  7. 配置文件和sqlplus简单使用

    oracle简单配置文件 数据文件目录 D:\app\inmeditation\oradata\orcl 以.CTL结尾得的文件是数据库的控制文件 以.LOG结尾的是数据库日志文件 以.DBF结尾的是 ...

  8. Python远程linux执行命令

    1.远程登录到linux上,使用到的模块paramiko #远程登陆操作系统 def ssh(sys_ip,username,password,cmds): try #创建ssh客户端 client ...

  9. 【CF528E】Triangles 3000（计算几何）

    [CF528E]Triangles 3000(计算几何) 题面 CF 平面上有若干条直线,保证不平行,不会三线共点. 求任选三条直线出来围出的三角形的面积的期望. 题解 如果一定考虑直接计算这个三角形 ...

  10. Python - __name__=='__main__'是干啥的，以及python -m与python的区别

    1. __name__=='__main__'是干啥的 先看例子,准备a.py和b.py放在同一个文件夹中 vi a.py # coding: utf-8 print("i am just ...