详解Vue学习笔记进阶篇之列表过渡及其他


Posted in Javascript onJuly 17, 2017

本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现。

列表过渡

目前为止,关于过渡我们已经讲到:

  1. 单个节点
  2. 同一时间渲染多个节点中的一个

那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件。在我们深入例子之前,先了解关于这个组件的几个特点:

  1. 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>。你也可以通过 tag 特性更换为其他元素。
  2. 内部元素 总是需要 提供唯一的 key属性值.列表的进入和离开过渡

现在让我们由一个简单的例子深入,进入和离开的过渡使用之前一样的 CSS 类名。

<div id="app1">
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-item">
      {{item}}
    </span>
  </transition-group>
</div>
.list-item{
      display: inline-block;
      margin-right: 10px;
    }
    .list-enter-active, .list-leave-active{
      transition: all 1s;
    }
    .list-enter, .list-leave-to{
      opacity: 0;
      transform: translateY(30px);
    }
var app1 = new Vue({
  el:'#app1',
  data:{
    items:[1,2,3,4,5,6,7,8,9],
    nextNum:10
  },
  methods:{
    randomIndex:function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add:function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove:function () {
      this.items.splice(this.randomIndex(), 1)
    }
  }
})

运行结果:

详解Vue学习笔记进阶篇之列表过渡及其他

这个例子有个问题,当添加和移除元素的时候,周围的元素会瞬间移动到他们的新布局的位置,而不是平滑的过渡,我们下面会解决这个问题。

列表的位移过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的v-move 特性,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过 name 属性来自定义前缀,也可以通过 move-class 属性手动设置。

v-move对于设置过渡的切换时机和过渡曲线非常有用,你会看到如下的例子:

<div id="app2">
  <button @click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" :key="item">
      {{item}}
    </li>
  </transition-group>
</div>
.flip-list-move {
   transition: transform 1s;
}
var app2 = new Vue({
  el:'#app2',
  data:{
    items:[1,2,3,4,5,6,7,8,9]
  },
  methods:{
    shuffle:function () {
      this.items = _.shuffle(this.items)
    }
  }
})

这个例子需要添加以下引用

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

运行结果:

详解Vue学习笔记进阶篇之列表过渡及其他

这个看起来很神奇,内部的实现,Vue 使用了一个叫 FLIP 简单的动画队列

使用 transforms 将元素从之前的位置平滑过渡新的位置。

我们将之前实现的例子和这个技术结合,使我们列表的一切变动都会有动画过渡。

<div id="app3" class="demo">
  <button @click="shuffle">Shuffle</button>
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span v-for="item in items" :key="item" class="list-complete-item">
      {{item}}
    </span>
  </transition-group>
</div>
.list-complete-item{
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to{
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active{
  position: absolute;
}
var app3 = new Vue({
  el:'#app3',
  data:{
    items:[1,2,3,4,5,6,7,8,9],
    nextNum:10
  },
  methods:{
    shuffle:function () {
      this.items = _.shuffle(this.items)
    },
    randomIndex:function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add:function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove:function () {
      this.items.splice(this.randomIndex(), 1)
    }
  }
})

运行结果:

详解Vue学习笔记进阶篇之列表过渡及其他

列表的渐进过渡

通过 data 属性与 JavaScript 通信 ,就可以实现列表的渐进过渡:

<div id="app4">
  <input v-model="query">
  <transition-group
    name="staggered-fade"
    tag="ul"
    :css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave">
    <li v-for="(item, index) in computedList"
      :key="item.msg"
      :data-index="index">
      {{item.msg}}
    </li>
  </transition-group>
</div>
var app4 = new Vue({
  el:'#app4',
  data:{
    query:'',
    list:[
      {msg:'Bruce Lee'},
      {msg:'Jackie Chan'},
      {msg:'Chuck Norris'},
      {msg:'Jet Li'},
      {msg:'Kung Furry'},
      {msg:'Chain Zhang'},
      {msg:'Iris Zhao'},
    ]
  },
  computed:{
    computedList:function () {
      var vm = this
      return this.list.filter(function (item) {
        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
      })
    }
  },
  methods:{
    beforeEnter:function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter:function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(el, {opacity:1, height:'1.6em'},{complete:done})
      }, delay)
    },
    leave:function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(el, {opacity:0, height:0}, {complete:done})
      }, delay)
    }
  }
})

上述js代码需要添加对Velocity引用:

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

运行结果如下:

详解Vue学习笔记进阶篇之列表过渡及其他

可复用的过渡

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件,你需要做的就是将<transition>或者 <transition-group>作为根组件,然后将任何子组件放置在其中就可以了。

下面的例子是将上一个列表渐进过渡的例子改为可复用的过渡的源码:

<div id="app5">
  <input v-model="query">
  <my-transition :query="query" :list="list">
    <li v-for="(item, index) in computedList"
      :key="item.msg"
      :data-index="index">
      {{item.msg}}
    </li>
  </my-transition>
</div>
Vue.component('my-transition', {
  template:`
  <transition-group
    name="staggered-fade"
    tag="ul"
    :css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave">
    <slot></slot>
  </transition-group>`,
  props:['query', 'list'],
  methods:{
    beforeEnter:function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter:function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(el, {opacity:1, height:'1.6em'},{complete:done})
      }, delay)
    },
    leave:function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(el, {opacity:0, height:0}, {complete:done})
      }, delay)
    }
  }
})

var app5 = new Vue({
  el:'#app5',
  data:{
    query:'',
    list:[
      {msg:'Bruce Lee'},
      {msg:'Jackie Chan'},
      {msg:'Chuck Norris'},
      {msg:'Jet Li'},
      {msg:'Kung Furry'},
      {msg:'Chain Zhang'},
      {msg:'Iris Zhao'},
    ]
  },
  computed:{
    computedList:function () {
      var vm = this
      return this.list.filter(function (item) {
        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
      })
    }
  },
})

效果与上一个例子一致:

详解Vue学习笔记进阶篇之列表过渡及其他

但是函数组件更适合完成这个任务。由于暂时还没有学到render函数,所以暂时先不实现render函数组件。后面学到的时候再做打算。

动态过渡

在 Vue 中即使是过渡也是数据驱动的!动态过渡最基本的例子是通过 name 特性来绑定动态值。

<transition v-bind:name="transitionName">
 <!-- ... -->
</transition>

当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画 在不同过渡间切换会非常有用。

所有的过渡特性都是动态绑定。它不仅是简单的特性,通过事件的钩子函数方法,可以在获取到相应上下文数据。这意味着,可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果。

<div id="app6">
  Fade In:
  <input type="range" v-model="fadeInDuration" min="0" :max="maxFadeDuration">
  Fade Out:
  <input type="range" v-model="fadeOutDuration" min="0" :max="maxFadeDuration">
  <transition
    v-bind:css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave">
    <p v-if="show">hello chain</p>
  </transition>
  <button @click="stop = true">Stop it</button>
</div>
var app6 = new Vue({
  el: '#app6',
  data: {
    show: true,
    fadeInDuration: 1000,
    fadeOutDuration: 1000,
    maxFadeDuration: 1500,
    stop: false
  },
  mounted: function () {
    this.show = false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 1 },
        {
          duration: this.fadeInDuration,
          complete: function () {
            done()
            if (!vm.stop) vm.show = false
          }
        }
      )
    },
    leave: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 0 },
        {
          duration: this.fadeOutDuration,
          complete: function () {
            done()
            vm.show = true
          }
        }
      )
    }
  }
})

运行结果:

详解Vue学习笔记进阶篇之列表过渡及其他

其中例子里的mounted是在Vue挂载完成,也就是模板中的html渲染到html页面中时的一个钩子函数,只会执行一次。具体内容可以理解下Vue的生命周期,这里就不赘述了。

但是如果这里不使用mounted的话,也是可以用初始渲染来实现,只不过比较麻烦。实现的方法是:

在transition中加入appear钩子函数:@appear="appear",然后在vue实例的methods中添加appear方法:

appear: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 1 },
        {
          duration: this.fadeInDuration,
          complete: function () {
            done()
            if (!vm.stop) vm.show = false
          }
        }
      )
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
js学使用setTimeout实现轮循动画
Jul 17 #Javascript
详解Vue2.x-directive的学习笔记
Jul 17 #Javascript
javascript  数组排序与对象排序的实例
Jul 17 #Javascript
jQuery常用选择器详解
Jul 17 #jQuery
js轮播图的插件化封装详解
Jul 17 #Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 #Javascript
Vue.js中组件中的slot实例详解
Jul 17 #Javascript
You might like
php empty函数判断mysql表单是否为空
2010/04/12 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
python调用staf自动化框架的方法
2018/12/26 Python
python实现淘宝秒杀脚本
2020/06/23 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
办公室主任岗位职责
2013/11/08 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
大气污染防治方案
2014/05/19 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
教师节主题班会方案
2015/08/17 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android