<!-- 点击 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. linux 下使用 tc 模拟网络延迟和丢包-使用 linux 模拟广域网延迟 - Emulating wide area network delays with Linux

    tc 是linux 内置的命令:使用man pages 查看 我们看到,其功能为 show / manipulate traffic control settings,可对操作系统进行流量控制: ne ...

  2. 『003』Shell命令

    『001』索引-Linux Shell Command shell命令 <01>[线上查询及帮助][001]-[001] [001]- 点我快速打开文章[man][help][已改版] & ...

  3. MYSQL 命令导出事件、存储过程、触发器

    普通导出某个数据库 mysqldump -u username -p passowrd databasename > file.sql 顺便导出事件 使用 –events 参数 mysqldum ...

  4. 201871010126 王亚涛《面向对象程序设计 JAVA》 第十三周学习总结

      内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  5. 【西北师大-2108Java】期中成绩汇总

    [西北师大-2108Java]期中成绩汇总 作业成绩 2018软件工程 得分排行 千帆竞发图 得分明细 学号 博客 博客 总分 201571030325 325 60 201571030332 htt ...

  6. Centos7升级gcc极简教程

    centos7默认gcc版本为4.8,一般不满足编译需求,因此升级gcc版本为常见操作: 现有博客中,大多数教程都是基于源码重新编译安装:但是源码编译过程等待时间很长且编译麻烦. 因此,直接基于命令升 ...

  7. 模块基础实战之ATM和购物车系统分文件处理

    目录 一.项目地址 二.功能需求 一.项目地址 https://github.com/nickchen121/atm 二.功能需求 FUNC_MSG = { '0': '注销', '1': '登录', ...

  8. Java-100天知识进阶-Java内存-知识铺（四）

    知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停的来唤醒你记忆深处的知识点. 1.Java内存模型是每个java程序员必须掌握理解的 2.Java内存模型的主要目标 ...

  9. Java并发编程入门，看这一篇就够了

    Java并发编程一直是Java程序员必须懂但又是很难懂的技术内容.这里不仅仅是指使用简单的多线程编程,或者使用juc的某个类.当然这些都是并发编程的基本知识,除了使用这些工具以外,Java并发编程中涉 ...

  10. TCP协议 - 面向连接

    一.TCP特性概览 1.面向连接 TCP是基于连接进行数据交互,通信双方在进行数据交互之前需要建立连接,该连接也只能用在双方之间进行交互.这点不像UDP中的组播和广播,可以在同一组中多个主机交互数据. ...