本文只是结合一些代码和图片加强对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. Linux I2C驱动程序设计

    1. Linux I2C子系统架构 (1)I2C核心(I2C-Core):I2C 总线和I2C 设备驱动的中间枢纽,它提供了I2C 总线驱动和设备驱动的注册.注销方法等 (2)I2C控制器驱动(ada ...

  2. reset.css(重置浏览器默认样式)

    @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1 ...

  3. this和target目标对象的区别

    在事件函数中 event.target和this是一样的效果吗? this是调用方法的对象, evemt.target事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. ...

  4. linux curl post/put请求

    案列: -X: 请求方式 --header: 请求header -d: 请求的数据 最后跟上请求的地址 curl -X PUT --header 'Content-Type: application/ ...

  5. sort sorted() reverse() reversed() 的区别1

    sort()是可变对象(字典.列表)的方法,无参数,无返回值,sort()会改变可变对象,因此无需返回值.sort()方法是可变对象独有的方法或者属性,而作为不可变对象如元组.字符串是不具有这些方法的 ...

  6. quickly calc pow(i, n) since i in [1~n]

    #include <bits/stdc++.h> using namespace std; #define inf (0x3f3f3f3f) typedef long long int L ...

  7. Oracle 数据库、表、方案的逻辑备份与恢复

    数据库(表)的逻辑备份与恢复 逻辑备份是指使用工具export将数据对象的结构和数据导出到文件的过程,逻辑恢复是指当数据库对象被破坏而使用工具import利用备份的文件把数据对象导入到数据库的过程,逻 ...

  8. 【ExtJS】FormPanel 布局(一)

    准备工作,布置一个最简单的Form,共5个组件,都为textfield. Ext.onReady(function(){ Ext.create('Ext.form.Panel', { width: 5 ...

  9. HTTP 状态代码之汇总+理解

    这里有百度百科的介绍,还挺全的. 下面是在开发过程中遇到过的各种码,自己的问题自己的原因,同码不同错,贱笑贱笑. HTTP 406 Not Acceptable 这个错误的原因,是由于框架使用了`Sp ...

  10. idea maven install 卡住，无报错排查。

    今天使用idea打包,执行install,看控制台日志,卡主了(意思是日志不继续在控制台输打印了,卡主了,也看不到错误),也没有报错,然后进行排查. 进入dos命令,进入到项目的根目录,使用 运行 m ...