<!-- 点击 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. go语言设计模式之memento

    memento.go package memento import ( "fmt" ) type State struct { Description string } type ...

  2. faster-rcnn错误信息 ： tensorflow.python.framework.errors_impl.InvalidArgumentError: Assign requires shapes of both tensors to match. lhs shape= [21] rhs shape= [2]

    faster-rcnn错误信息 : tensorflow.python.framework.errors_impl.InvalidArgumentError: Assign requires shap ...

  3. CF1248E Queue in the Train

    题目链接 problem 火车上的一列人要去排队接水.每个人都会在某个特定的时刻口渴.口渴之后他要去排队接水,如果他前面的座位有人已经在排队或者正在接水,那么他就不会去排队.否则他就会去排队.每个人接 ...

  4. python3的ExecJS安装使用

    参考官方文档安装 pip3 install PyExecJS 代码编写 import execjs ctx = execjs.compile(""" function a ...

  5. 【译】3D打印：介绍

    原文地址:(需要翻墙)https://ordina-jworks.github.io/iot/2018/09/28/3D-Printing-Intro.html 文章发表日期:2018-09-28 第 ...

  6. mac--“-bash: brew: command not found”，怎么解决？

    报错 “-bash: brew: command not found” 执行下面命令,安装HomeBrew ruby -e "$(curl -fsSL https://raw.githubu ...

  7. oracle视图和索引

    视图和索引 视图 视图的作用 控制数据访问.简化查询.避免重复访问相同的数据 视图的优点 限制用户只能通过视图检索数据,用户看不到底层基表 注意事项 视图可以理解为临时表,会随着真实表的数据变化而自动 ...

  8. svn版本管理配置权限

    修改svn配置 编辑svnserve.conf文件 第19,20行删掉前面的#--意思就是打开 ancon-access = none  匿名用户不可读 auth-access = write 认证可 ...

  9. [debug] 关闭vs的增量链接

    1. 什么是增量链接? 答:采用Debug模式下,函数地址并不是该函数的开始部分,而是跳转到一个 jmp 函数地址. 比如,一个函数 test(),其地址 test 对应的汇编语句是 "jm ...

  10. curl_multi_*模拟多线程异步用法

    测试环境: PHP版本:php7.0.10 mysql版本:5.7.14 测试用例:循环插入两千行数据到数据库 public function test_syn($pc){ // $pc = trim ...