本文引入类库的方式均采用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. shell与export命令

    围绕以下几个问题来学习export命令: 1.什么是export命令? 2.为什么要用export命令? 3.怎么使用export命令? 1.什么是export命令? ♦ 用户登录到Linux系统后, ...

  2. 基于SpringBoot从零构建博客网站 - 技术选型和整合开发环境

    技术选型和整合开发环境 1.技术选型 博客网站是基于SpringBoot整合其它模块而开发的,那么每个模块选择的技术如下: SpringBoot版本选择目前较新的2.1.1.RELEASE版本 持久化 ...

  3. 434个H5游戏源码

    各种类型HTML5游戏,界面和JS均可供项目参考 下面是下载地址

  4. Eclipse Debug调试遇到的问题

    在使用Debug模式前,一定要先打好断点.快捷调试方法:   在使用过程中,可以只保留Console,Variables,Debug窗口,把其他无用的窗口最小化掉,或者删掉即可.如果要恢复删掉的试图, ...

  5. Kubernetes的DaemonSet（下篇）

    用Daemon Pod来进行通信 使用Pod来再DaemonSet中通信的手段有: 推的方式:在DaemonSet中的Pod会被配置成发送更新到如状态数据库这样的服务.这些都没有客户端. IP+端口方 ...

  6. CSS fixed 定位元素失效的问题

    一个示例 考察下面的代码: <head> <title>css filter issue</title> <style> body { height: ...

  7. JPA中自定义的插入、更新、删除方法为什么要添加@Modifying注解和@Transactional注解？

    前几天,有个同事在使用JPA的自定义SQL方法时,程序一直报异常,捣鼓了半天也没能解决,咨询我的时候,我看了一眼他的程序,差不多是这个样子的: @Repository public interface ...

  8. 【.NETCore开源】开弓没有回头箭

    2019.2.11 开工大吉!经过了半个月的休假,今天回归岗位重新拾起工作,却发现熟悉的代码生疏了.年前的计划回忆不起来了,俗称"节后综合症". 忆半月圈子 过年放假的前几天有多篇 ...

  9. 一般处理程序，将nvarchar值转换成数据类型int时失败

    系统:WIndows 10 工具:Visual Studio 2017 在写代码的过程中,我遇到了这样的一个问题.如图 vs错误提示是在SqlHelper中有错,可是怎么改都不能解决问题. 最后发现是 ...

  10. SpringBoot整合SpringCloud搭建分布式应用

    什么是SpringCloud? SpringCloud是一个分布式的整体解决方案.SpringCloud为开发者提供了在分布式系统中快速构建的工具,使用SpringCloud可以快速的启动服务或构建应 ...