<!-- 点击 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. Jedis Unexpected end of stream & java.net.SocketException: Broken pipe问题解决思路

    笔者一直维护的稳定基础服务测试环境不稳定了,这能忍!盘他,虽然不一定能完全盘的了. 背景: hrexternal 基础服务对外提供公司员工获取的多个接口,很多接口访问频率比较高,加了缓存,使用的是re ...

  2. LogMiner Utility Release 8i - 11g (Doc ID 291686.1)

    LogMiner Utility Release 8i - 11g (Doc ID 291686.1) APPLIES TO: Oracle Database Exadata Cloud Machin ...

  3. VirtualBox设置自动适应屏幕

    设备 --> 安装增强功能 等待安装完成,就能自动适应屏幕大小了

  4. 记录Ubuntu下使用docker使用

    关键词:docker.Dockerfile等等. 这里主要记录Ubuntu下docker使用细节. 首先是如何安装,然后如何创建docker镜像.搭建docker服务器.运行使用docker. 1. ...

  5. CodeForces - 1230D（思维+位运算）

    题意 https://vjudge.net/problem/CodeForces-1230D 要组建一个小组,要求小组中每个人都不比所有人强,当一个人懂得一个算法但是另一个不懂那么前者认为他比后者强. ...

  6. a迭代尾声处理

    这是小组开发a阶段迭代的成员工具teambition,现阶段a迭代需要最后的整合,同时我们也在开始了b迭代过程,并不断完善在开发工程中我们文档方面的记录

  7. What is Market Intelligence and how is it Used?

    https://blog.globalwebindex.com/marketing/market-intelligence/ Market intelligence is the gathering ...

  8. Linux设备树文件结构与解析深度分析

    Copy from :https://blog.csdn.net/woyimibayi/article/details/77574736 正文开始 1. Device Tree简介 设备树就是描述单板 ...

  9. 【PAT甲级】Public Bike Management 题解

    题目描述 There is a public bike service in Hangzhou City which provides great convenience to the tourist ...

  10. fastdfs使用总结

    参考:https://www.cnblogs.com/chiangchou/p/fastdfs.html   说明:这篇博客是为了记录我在安装和使用FastDFS分布式文件系统时遇到的问题和解决方法, ...