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

    Advertise Window大小 注册表键值位于:regedit->HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Pa ...

  2. FlutterToast 使用

    参看 FlutterToast 开源库 https://github.com/PonnamKarthik/FlutterToast

  3. 其它浏览器上是可以正常请求的,ie浏览器上确出现奇怪的http请求400错误

    做项目的时候,遇到一个小的问题.一个location.href="请求的url"在其它浏览器上是可以正常请求的.但是在ie浏览器上确出现奇怪的http请求400错误,我们先来对于h ...

  4. SpringBoot内嵌Tomcat开启APR模式(运行环境为Centos7)

    网上查到的一些springboot内嵌的tomcat开启apr的文章,好像使用的springboot版本较老,在SpringBoot 2.0.4.RELEASE中已经行不通了.自己整理了一下,供参考. ...

  5. 导项目jar包问题

    找到项目.classpath  修改jar包路径 成下载项目的web-root/web-inf/lib路径 C:\Users\Administrator\Desktop\APP_MOBILE_SERV ...

  6. 配置idea解决乱码

    在项目开发过程中,我们一般希望在修改完代码之后不重启项目即可提现出修改的结果,那么热部署项目就显得十分必要了.在idea中将项目热部署至tomcat中的方法如下: 首先打开tomcat配置界面,在se ...

  7. 2019第九届MathorCup数学建模

    题目下载:https://www.lanzous.com/i3taz2j 总共四个问题 问题1 首先附件一中的数据,拿到后肯定感觉棘手.我们的处理方法: 在下面缺失数据的地方我们都认为是问题3中的预测 ...

  8. 006-动态生成验证码Servlet代码模板

    package checking; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java ...

  9. jsoup、xpath教程

    一.jsoup 1.使用JSOUP处理HTML文档 2.使用 jsoup 对 HTML 文档进行解析和操作 3.jsoup开发指南,jsoup中文使用手册,jsoup中文文档 二.xpath 1.XP ...

  10. django中多个字段的模糊查询

    django中多个字段的模糊查询 使用Entity.objects.filter(name_contains='kris').filter(address='beijing') 这个方法是指名字包含k ...