本文只是结合一些代码和图片加强对Vue动画的理解，更多资料请戳这里

结合原生CSS实现动画

下面是一张图片，简单清晰明了是吧^-^

下面是一段代码

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .show-enter-active,.show-leave-active{

            transition: all 0.4s ease;

            padding-left: 10px;

        }

        .show-enter,.show-leave-active{

            padding-left: 100px;

        }

    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  </head>

  <body>

    <div id="app">

        <button @click="toggle">点击隐藏和显示</button>

      <transition name="show">

          <h3 v-show="isshow">{{message}}</h3>

      </transition>

    </div>

    <script>

      new Vue({

        el: '#app',

        data: {

          message:"hello Vue!",

          isshow:false

        },

        methods:{

            toggle:function(){

                this.isshow = !this.isshow;

            }

        }

      })

    </script>

  </body>

</html>

结合animate.css实现动画

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css" />

    <style>

        .show{

            transition: all 0.4s ease;

        }

    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  </head>

  <body>

    <div id="app">

        <button @click="toggle">点击隐藏和显示</button>

      <transition enter-active-class="fadeInRight"

                  leave-active-class="fadeOutRight">

          <div v-show="isshow" class="animated" class="show">{{message}}</div>

      </transition>

    </div>

    <script>

      new Vue({

        el: '#app',

        data: {

          message:"hello Vue!",

          isshow:false

        },

        methods:{

            toggle:function(){

                this.isshow = !this.isshow;

            }

        }

      })

    </script>

  </body>

</html>

使用钩子函数实现动画效果

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .show{

            transition: all 0.4s ease;

        }

    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  </head>

  <body>

    <div id="app">

        <button @click="toggle">点击隐藏和显示</button>

            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">

                <div v-show="isshow" class="show">{{message}}</div>

            </transition>

    </div>

    <script>

      new Vue({

        el: '#app',

        data: {

          message:"hello Vue!",

          isshow:false

        },

        methods:{

            toggle:function(){

                this.isshow = !this.isshow;

            },

            beforeEnter:function(el){

                //定义当前实现动画的初始位置

                el.style.transform = "translate(100px,0)";

            },

            enter:function(el,done){

                //设置一下刷新状态

                el.offsetWidth;

                //设置动画的结束位置

                el.style.transform = "translate(0px,0)";

                //手动调用一下done方法，由这个方法去决定动画是否结束了

                //否则动画的消失会有延迟

                done();

            },

            afterEnter:function(el){

                //将动画的状态复原设置

                this.isshow = !this.isshow;

            }

        }

      })

    </script>

  </body>

</html>

Vue2.0的动画效果的更多相关文章

  1. vue2.0中动画

    #vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...

  2. 【重点突破】—— Vue2.0 transition 动画Demo实践填坑

    前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...

  3. vue2.0过度动画

    vue在插入.更新或移除dom时,提供了多种不同方式的应用过度效果. 包括以下工具: 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库,如animate.css 在过渡钩子函数 ...

  4. vue2.0动画

    相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...

  5. 使用 CSS3 实现超炫的 Loading（加载）动画效果

    SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...

  6. Android中的动画效果

    动画的种类 透明动画alphaAnimation 在代码中配置动画: findViewById(R.id.btnAnimMe).setOnClickListener(new View.OnClickL ...

  7. Swift - 动画效果的实现方法总结（附样例）

    在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用 ...

  8. css3 加载动画效果

    Loading 动画效果一           HTML 代码: <div class="spinner"> <div class="rect1&quo ...

  9. Java 给PPT添加动画效果（预设动画/自定义动画）

    PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...

随机推荐

  1. Q844 比较含退格的字符串

    给定 S 和 T 两个字符串,当它们分别被输入到空白的文本编辑器后,判断二者是否相等,并返回结果. # 代表退格字符. 示例 1: 输入:S = "ab#c", T = " ...

  2. c# 水晶报表使用说明

    水晶报表介绍 水晶报表是 vs 早期版本自带的一款报表控件.vs2017不自带水晶报表,需要自行安装.虽然水晶报表是收费控件,但是微软已经付过钱了,所以vs自带的水晶报表可以直接使用. 如果项目是 . ...

  3. $bzoj1021-SHOI2008\ Debt$ 循环的债务 $dp$

    题面描述 \(Alice\).\(Bob\)和\(Cynthia\)总是为他们之间混乱的债务而烦恼,终于有一天,他们决定坐下来一起解决这个问题.不过,鉴别钞票的真伪是一件很麻烦的事情,于是他们决定要在 ...

  4. goledengate重新投递和目标端跳过过事务

    日常在goledengate的维护中,最大的问题莫过于进程ABENDING.在我的维护生涯中,主要的有两个原因,第一个是网络中断造成的造成的文件损坏,一个是大事务(相关操作人员在进行操作的时候事务过大 ...

  5. mysql故障总结

    MYSQL故障排查 https://zhuanlan.zhihu.com/p/27834293

  6. 使用js命名空间进行模块式开发

    在java中,为了防止命名冲突和模块式开发,会有个一个import 关键字来进行导包. 在js中为了达到同样的效果,我们也通过给其自定义一个“包”的概念. 直接上代码: 首先有个LC.js文件: // ...

  7. vue 坑之 vuex requires a Promise polyfill in this browser

    android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1 ...

  8. 入门系列之在Ubuntu上使用Netdata设置实时性能监控

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小翼 发表于云+社区专栏 介绍 Netdata通过可扩展的Web仪表板提供准确的性能监控,可以显示Linux系统上的流程和服务.它监控 ...

  9. Python基础(9) - 类

    Python 看下面一个简单类: >>> class MyClass(object): ... """ ... this is a class with ...

  10. Oracle 12c心得

    1.重新启动Listener后,远程客户端登录不了,只能全新启动Oralce服务才能正常,经分析,用Net Manager增加一个服务器的IP地址的监听. 执行 net start 监听服务名 再远程 ...