本文引入类库的方式均采用CND的方式，可直接复制代码到编辑器中学习和测试

  • 不使用动画切换元素

   <div id="app">

     <input type="button" value="toggle" @click="flag=!flag">

     <!-- 需求：点击按钮，让h3显示，再点击让h3隐藏 -->

     <h3 v-if="flag">这是一个H3</h3>

   </div>

   <script>

     // 创建Vue实例，得到ViewModel

     var vm = new Vue({

       el: '#app',

       data: {

         flag: false

       },

       methods: {}

     });

   </script>

  • 使用过渡类名实现动画

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->

  <style>

    /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入

     v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了 */

    .v-enter,.v-leave-to {

      opacity: 0;

      transform: translateX(150px);

    }

    /* v-enter-active 【入场动画的时间段】

    v-leave-active 【离场动画的时间段】 */

    .v-enter-active,.v-leave-active {

      transition: all 0.8s ease;

    }

  </style>

</head>

<body>

  <div id="app">

    <input type="button" value="toggle" @click="flag=!flag">

    <!-- 需求： 点击按钮，让h3显示，再点击，让h3隐藏 -->

    <!-- 1. 使用 transition元素，把需要被动画控制的元素包裹起来 -->

    <!-- transition元素，是Vue官方提供的 -->

    <transition>

      <h3 v-if="flag">这是一个H3</h3>

    </transition>

  </div>

  <script>

    // 创建Vue实例，得到ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        flag: false

      },

      methods: {}

    });

  </script>

</body>

</html>

  • 修改“v-”前缀用上面一种方式实现多个动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>
　　　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->

   <style>

     /* v-enter   【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入

        v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了 */

     .v-enter,

     .v-leave-to {

       opacity: 0;

       transform: translateX(150px);

     }

     /* v-enter-active 【入场动画的时间段】

        v-leave-active 【离场动画的时间段】 */

     .v-enter-active,

     .v-leave-active {

       transition: all 0.8s ease;

     }

     .my-enter,

     .my-leave-to {

       opacity: 0;

       transform: translateY(70px);

     }

     .my-enter-active,

     .my-leave-active {

       transition: all 0.8s ease;

     }

   </style>

 </head>

 <body>

   <div id="app">

     <input type="button" value="toggle" @click="flag=!flag">

     <!-- 需求： 点击按钮，让h3显示，再点击，让h3隐藏 -->

     <!-- 1. 使用transition元素，把需要被动画控制的元素，包裹起来 -->

     <!-- transition元素，是Vue官方提供的 -->

     <transition>

       <h3 v-if="flag">这是一个H3</h3>

     </transition>

     <hr>

     <input type="button" value="toggle2" @click="flag2=!flag2">

     <transition name="my">

       <h6 v-if="flag2">这是一个H6</h6>

     </transition>

   </div>

   <script>

     // 创建Vue实例，得到ViewModel

     var vm = new Vue({

       el: '#app',

       data: {

         flag: false,

         flag2: false

       },

       methods: {}

     });

   </script>

 </body>

 </html>

  • 使用第三方类库来实现

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

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

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

   <!-- 入场 bounceIn    离场 bounceOut -->

 </head>

 <body>

   <div id="app">

     <input type="button" value="toggle" @click="flag=!flag">

     <!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置入场的时长和离场的时长  -->

     <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }">

       <h3 v-if="flag" class="animated">这是一个H3</h3>

     </transition>

   </div>

   <script>

     // 创建Vue实例，得到ViewModel

     var vm = new Vue({

       el: '#app',

       data: {

         flag: false

       },

       methods: {}

     });

   </script>

 </body>

 </html>

  • 使用钩子函数模拟-动画的生命周期函数

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>
　　　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <style>

     .ball {

       width: 15px;

       height: 15px;

       border-radius: 50%;

       background-color: red;

     }

   </style>

 </head>

 <body>

   <div id="app">

     <input type="button" value="快到碗里来" @click="flag=!flag">

     <!-- 1. 使用 transition 元素把 小球包裹起来 -->

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

       <div class="ball" v-show="flag"></div>

     </transition>

   </div>

   <script>

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {

         flag: false

       },

       methods: {

           // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象

           // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象

         beforeEnter(el) {

           // beforeEnter 表示动画入场之前，此时动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式

           // 设置小球开始动画之前的起始位置

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

         },

         enter(el, done) {

           // 这句话没有实际的作用，但是，如果不写，出不来动画效果；

           // 可以认为 el.offsetWidth 会强制动画刷新

           el.offsetWidth

           // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态

           el.style.transform = "translate(150px, 450px)"

           el.style.transition = 'all 1s ease'

           // 这里的done，起始就是afterEnter这个函数，也就是说：done是afterEnter函数的引用

           done()

         },

         afterEnter(el) {

           // 动画完成之后，会调用afterEnter

           // console.log('ok')

           this.flag = !this.flag

         }

       }

     });

   </script>

 </body>

 </html>

  • 动画列表

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

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

   <style>

     li {

       margin: 5px;

       line-height: 35px;

       padding-left: 5px;

       font-size: 12px;

       width: 100%;

     }

     li:hover {

       background-color: hotpink;

       transition: all 0.8s ease;

     }

     .v-enter,

     .v-leave-to {

       opacity: 0;

       transform: translateY(80px);

     }

     .v-enter-active,

     .v-leave-active {

       transition: all 0.6s ease;

     }

     /* 下面的 .v-move 和 .v-leave-active配合使用，能够实现列表后续的元素渐渐地漂上来的效果 */

     .v-move {

       transition: all 0.6s ease;

     }

     .v-leave-active {

       position: absolute;

     }

   </style>

 </head>

 <body>

   <div id="app">

     <div>

       <label>

         Id:

         <input type="text" v-model="id">

       </label>

       <label>

         Name:

         <input type="text" v-model="name">

       </label>

       <input type="button" value="添加" @click="add">

     </div>

     <!-- <ul> -->

     <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->

     <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->

     <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->

     <!-- 通过 为 transition-group 元素，设置 tag 属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认渲染为span标签 -->

     <transition-group appear tag="ul">

       <li v-for="(item, i) in list" :key="item.id" @click="del(i)">

         {{item.id}} --- {{item.name}}

       </li>

     </transition-group>

     <!-- </ul> -->

   </div>

   <script>

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {

         id: '',

         name: '',

         list: [

           { id: 1, name: 'java' },

           { id: 2, name: 'C#' },

           { id: 3, name: 'php' },

           { id: 4, name: 'javascript' }

         ]

       },

       methods: {

         add() {

           this.list.push({ id: this.id, name: this.name })

           this.id = this.name = ''

         },

         del(i) {

           this.list.splice(i, 1)

         }

       }

     });

   </script>

 </body>

 </html>

vue.js之动画篇的更多相关文章

  1. 包学会之浅入浅出Vue.js：结业篇（转）

    蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...

  2. 包学会之浅入浅出Vue.js：结业篇

    在第一篇<包学会之浅入浅出Vue.js:开学篇>和上一篇<包学会之浅入浅出Vue.js:升学篇>的学习中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通 ...

  3. 包学会之浅入浅出Vue.js：升学篇

    包学会之浅入浅出Vue.js:升学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...

  4. 包学会之浅入浅出Vue.js：开学篇（转）

    包学会之浅入浅出Vue.js:开学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...

  5. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  6. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

  7. 包学会之浅入浅出 Vue.js：开学篇

    2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...

  8. 包学会之浅入浅出Vue.js：开学篇

    2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...

  9. vue.js过度&动画、混入&插件

    1.vue  过度动画 1.过度 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 语法格式: < ...

随机推荐

  1. php与html实现交互的基本操作

    今天我们来实现php与html页面注册和登录的效果.中国有句古话叫: 第一步:我们来了解一些php的基本格式. <?php php代码 ?> 第二步:了解php与js的一些基本区别 我们在 ...

  2. 基于 Maven 的多模块 Java ( Spring ) 项目构建

    索引: 开源Spring解决方案--lm.solution 参看代码 GitHub: solution/pom.xml pojo/pom.xml mapper/pom.xml common/pom.x ...

  3. Java Native Interface调用C++代码

    概述 Java Native Interface译为Java原生接口,简称JNI.Java并不是完美的,它的不足体现在运行速度要比传统的C++慢上许多,并且无法直接访问到操作系统底层,为此Java提供 ...

  4. MIP技术交流分享（3月9日）

    3月9日上周四下午,MIP 团队工程师与去哪儿酒店云.众荟的 Web 前端工程师进行了一次面对面的技术交流. 在这次交流中,MIP 工程师主要分享了 MIP 技术原理,MIP 加速原理,以及 MIP ...

  5. js实现 页面加载 完成 后顺序 执行

    function addLoadEvent(func){ var oldonLoad = window.onload; if(typeof window.onload != 'function'){ ...

  6. 阿里云ECS安装Cadvisor报错

    阿里云ECS安装Cadvisor报错安装命令: sudo docker run \ --volume=/:/rootfs:ro \ --volume=/var/run:/var/run:ro \ -- ...

  7. 【java线程】的wait、sleep、join、yied

    1.概述 使用Thread相对来说比较简单,没有什么成本,但是通常来说,我们使用线程基本就是覆写run方法,然后调用线程对象的start函数启动线程. 对于面试人员来说,这些都不是面试官会问到的问题, ...

  8. Android进程间通信（一）：AIDL使用详解

    一.概述 AIDL是Android Interface Definition Language的缩写,即Android接口定义语言.它是Android的进程间通信比较常用的一种方式. Android中 ...

  9. java_反射

    反射:reflect   成员属性:Field  成员方法:Method 构造方法:Constructor  类:Class 引用,援引:invoke   新实例:newInstance  Decla ...

  10. vue学习记录⑤（组件通信-父与子）

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...