Vue学习之transition-group列表过渡组件复用

最新推荐文章于 2024-04-17 09:44:22 发布

金胜涛

最新推荐文章于 2024-04-17 09:44:22 发布

阅读量478

点赞数 1

分类专栏：前端 vue javascript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_44054088/article/details/103575230

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

如下代码，本质上就是将transition-group作为根组件，内部使用slot插槽。
代码中使用到的Velocity是一个高性能的动画库
使用方式为Velocity(元素节点，css样式，配置项)
配置项详情可参考Velocity.js中文文档

Vue.component('demo-component', {
    template: `
    <transition-group
      tag="ul"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
    >
      <slot></slot>
    </transition-group>
    `,
    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)
      }
    }
  })

完整代码如下

<!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>可复用的过渡</title>
  <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<style>
  .list_item {
    height: 1.6em;
  }
</style>
<body>
  <div id="demo">
    <p>这是一个demo</p>
    <input v-model="query">
    <demo-component>
      <li
        class="list_item"
        v-for="(item, index) in computedList"
        :key="item.msg"
        :data-index="index"
      >{{ item.msg }}</li>
    </demo-component>
  </div>
</body>
<script>
  Vue.component('demo-component', {
    template: `
    <transition-group
      tag="ul"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
    >
      <slot></slot>
    </transition-group>
    `,
    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)
      }
    }
  })

  new Vue({
    el: '#demo',
    data: {
      query: '',
      list: [
        { msg: 'Bruce Lee' },
        { msg: 'Jackie Chan' },
        { msg: 'Chuck Norris' },
        { msg: 'Jet Li' },
        { msg: 'Kung Fury' }
      ]
    },
    computed: {
      computedList: function () {
        var vm = this
        return this.list.filter(function (item) {
          return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
        })
      }
    }
  })
</script>
</html>

注意： transition-group的子元素必须带上key，否则不显示。

金胜涛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习之transition-group列表过渡组件复用

如下代码，本质上就是将transition-group作为根组件，内部使用slot插槽。代码中使用到的Velocity是一个高性能的动画库使用方式为Velocity(元素节点，css样式，配置项)配置项详情可参考Velocity.js中文文档Vue.component('demo-component', { template: ` <transition-group...
复制链接

扫一扫