<!-- 点击 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. 通过Shell脚本来创建批量服务器上的MySQL数据库账号

    1.项目背景 因监控需要,我们需要在既有的每个MySQL实例上创建一个账号.公司有数百台 MySQL 实例,如果手动登入来创建账号很麻烦,也不现实.所以,我们写了一个简单的shell脚本,用来创建批量 ...

  2. RPM常用命令总结

    安装 rpm -ivh package_name (package_name指的是RPM包的文件名) 查询 1.查询是否安装,及安装版本 rpm -q 已安装的软件名(ex:rpm -q docker ...

  3. matplotlib---修改图例

    matplotlib.pyplot.legend(*args, **kwargs) 参考文献: [1]python - matplotlib.legend()函数用法解析 - qq_33221533的 ...

  4. IDEA的@Override下面有红色波浪线怎么去掉

    测试了 , 不会影响运行 ! 去掉红线 ! file - seting - java compiler - 把两个version都改成1.8  !  (  因为我的jdk是1.8) file - pr ...

  5. 【2019.8.20 NOIP模拟赛 T2】小B的树（tree）（树形DP）

    树形\(DP\) 考虑设\(f_{i,j,k}\)表示在\(i\)的子树内,从\(i\)向下的最长链长度为\(j\),\(i\)子树内直径长度为\(k\)的概率. 然后我们就能发现这个东西直接转移是几 ...

  6. 趣谈Linux操作系统学习笔记：第二十八讲

    一.引子 磁盘→盘片→磁道→扇区(每个 512 字节) ext* 定义文件系统的格式 二.inode 与块的存储 1.块 2.不用给他分配一块连续的空间 我们可以分散成一个个小块进行存放 1.优点 2 ...

  7. JS实现网站楼层导航效果

     壹 ❀ 引 我在angularjs中使用锚点这篇文章中,踩坑并简单实现了楼层导航中点击小图标跳转到对应楼层的功能:但对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导 ...

  8. glibc编译安装

    glibc是gnu发布的libc库,即c运行库.glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc.glibc除了封装linux操作系统所提供的系统服务外,它本身也提供 ...

  9. Windows Store无法联网时安装WSL

    Windows Store无法联网时安装WSL 1 打开powershell 输入命令: Invoke-WebRequest -Uri https://aka.ms/wsl-ubuntu-1604 - ...

  10. 基于 EntityFramework 生成 Repository 模式代码

    借助 WeihanLi.EntityFramework 实现简单的 Repository Intro 很多时候一些简单的业务都是简单的增删改查,动态生成一些代码完成基本的增删改查,而这些增删改查代码大 ...