本文只是结合一些代码和图片加强对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. python中的try/except/else/finally语句

    与其他语言相同,在python中,try/except语句主要是用于处理程序正常执行过程中出现的一些异常情况,如语法错误(python作为脚本语言没有编译的环节,在执行过程中对语法进行检测,出错后发出 ...

  2. [转] Jenkins pipeline 中获取 exit code, stdout and stderr 返回值和输出

    [From] https://issues.jenkins-ci.org/browse/JENKINS-44930 其做法是,把stdout定向到一个文件,sh 配置 returnStatus: tr ...

  3. web网站优化

    没事儿研究一下YAHOO工程师对网站优化给出的策略,对重点部分在这儿做下笔记 -----------------------------------------------我是分割线--------- ...

  4. 安装orcle服务器端后，不需要安装客户端，可通过plsql登录

    用PL/SQL连接oracle数据库,不管是本地的还是远程的,一般都需要安装oracle客户端(500M左右)比较大,而且在各个系统上安装也有些讲究,需要修改相应配置文件,有点麻烦,像平时开发时候,我 ...

  5. python 使用缓存加快运算

    from functools import lru_cache import time from functools import wraps def clock(func): @wraps(func ...

  6. stm32CubeMx 实现单通道ADC DMA采集

    今天要做的是ADC单通道DMA采集实验 MCU : STM32F429 开发工具:STM32CubeMx 版本号 5.0.0 实验目的:实现ADC1 13通道 DMA采集 一 :简介 首先,我们来看一 ...

  7. (转)使用LVS实现负载均衡原理及安装配置详解

    使用LVS实现负载均衡原理及安装配置详解 原文:https://www.cnblogs.com/liwei0526vip/p/6370103.html

  8. 我的Python升级打怪之路【一】：python的简单认识

    Python的简介 Python与其他语言的对比: C和Python.Java.C# C语言:代码直接编译成了机器码,在处理器上直接执行 Python.Java.C#:编译得到相应的字节码,虚拟机执行 ...

  9. 在Eclipse添加Android兼容包( v4、v7 appcompat )［转］

    昨天添加Android兼容包,碰到了很多问题,在这里记录一下,让后面的路好走. 如何选择兼容包, 请参考Android Support Library Features(二) 一.下载Support ...

  10. 【CSS】CSS Sprites (CSS 精灵) 技术

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...