本文只是结合一些代码和图片加强对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. Locust 基本使用

    Locust 使用Python代码来定义用户行为,用它可以模拟百万级的并发用户来访问系统. 与其他性能工具对比如下: LoadRunner 商业性能测试工具,报告完整,不支持二次开发 开发语言:C/J ...

  2. sql语句之group_concat函数

    MySQL中group_concat函数 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔 ...

  3. Rabbitmq的五种模式和案例

    消息生产者p将消息放入队列 消费者监听队列,如果队列中有消息,就消费掉,消息被拿走后,自动从队列删除 (缺点:消息可能没有被消费者正确处理,已经消失了,无法恢复) 应用场景:聊天室 1.引入依赖 &l ...

  4. c# 如何得到一个字符的ASCII码

    '; int b = (int)a; 就这么简单..

  5. 汉诺塔问题java实现

    问题描述 三个柱子,起初有若干个按大小关系顺序安放的盘子,需要全部移动到另外一个柱子上.移动规则:在小圆盘上不能放大圆盘,在三根柱子之间一次只能移动一个圆盘. 解题思路 使用递归算法进行处理,实在理不 ...

  6. jedis入门教程

    1 jedis介绍 2 java连接Redis 1 导入jar包 2 连接实例 @Test //获得单一的jedis对象操作数据库 public void test1(){ //1.获得连接对象 设置 ...

  7. 使用NDK编译含JNI的Android项目常见问题解决方案

    有时候,自己下载的或者拷贝过来的JNI项目出现莫名错误,通常是找不到头文件,可能解决方案如下: Removing the C nature: The only way I could find to ...

  8. Handling of asynchronous events---reference

    http://www.win.tue.nl/~aeb/linux/lk/lk-12.html 12. Handling of asynchronous events One wants to be n ...

  9. 利用git工具命令简单的从github上拷贝和上传代码

    第一:从github上拷贝项目到本地   1.在github上建立一个项目名为:MygitTest 2.在我们本地电脑上把这个项目拷贝下来:直接选择一个文件夹,右键选择git Bash here 直接 ...

  10. zIndex 属性设置元素的堆叠顺序。

    http://www.w3school.com.cn/jsref/prop_style_zindex.asp zIndex 属性设置元素的堆叠顺序. 该属性设置一个定位元素沿 z 轴的位置,z 轴定义 ...