2021-08-05 vue实现过渡-transition-group

在实际开发中，却终究难逃多个元素都需要进行使用过渡效果进行展示，很显然， 组件并不能实现我的业务需求。这个时候，vue 内部封装了 这么一个内置组件来满足我们的需要，它很好的帮助我们实现了列表的过渡效果。

一，举例

<template>
  <div id="list-demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      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)
    }
  }
}
</script>

<style lang="scss">
.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);
}
</style>

二，详细

1. transition—是一个抽象组件，且只对单个元素生效。
2. transition-group-- 组件实现了列表的过渡，并且它会渲染一个真实的元素节点

export default {
  props,
  beforeMount () {
    // ...
  },
  render (h: Function) {
    // ...
  },
  updated () {
    // ...
  },
  methods: {
    // ...
  }
}

但他们的设计理念却是一致的，同样会给我们提供一个 props 和一系列钩子函数给我们当做 输入 的接口，内部进行 输入 => 输出 的转换或者说绑定处理

二级标题1.为什么要使用

是vue封装的过渡组件

<transition name="fade" mode="out-in"> //mode="out-in"模式先出后进
    <router-view></router-view>
</transition >

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .4s
}
.fade-enter,.fade-leave-to {
  opacity: 0
}

这个组件里只有一个元素，当我们在其里面多加一具元素时，发生了什么

浏览器里并不出现新加的内容。这是为什么？因为在vue里，里只能放置一个元素

但是如果我们想在一个过渡效果里放置多个元素时，怎么办

用

2.的key属性

当我们将改成，发现控制台里依然有错误提示—当里有多个元素时，需要给每个元素设置key值，并且每个key值是不能一样的。设置完后，页面就恢复正常了。

<transition-group name="fade" mode="out-in">
    <router-view key="aa"></router-view>
    <div key="bb">merry christmas</div>
</transition-group>

3.和的区别

<transition–里只能包裹一个元素

<transition-group–可以包裹多个元素

4.使用需要注意的点是

包裹的元素必须要设置key值

Key值不能设置成一样的

第三版

1， 说明

（1）不同于 ， 会以一个真实元素呈现：默认为一个 （我们可以通过 tag 特性更换为其他元素。）
（2）过渡模式不可用，因为我们不再相互切换特有的元素。
（3） 的内部元素总是需要提供唯一的 key 属性值。

2，列表的进入、离开过渡

（1）效果图
点击“插入一个元素”按钮，会在下方随机位置插入一个新的数字方块，新方块在插入过程中会有过渡动画。
点击“移除一个元素”按钮，会随机删除下方的一个数字方块，该方块在移除过程中会有过渡动画。
原文:Vue.js - Transition过渡动画的使用4（使用transition-group实现列表过渡）

（2）样例代码

<template>
  <div id="app">
    <div id="list-demo" class="demo">
    <button v-on:click="add">插入一个元素</button>
    <button v-on:click="remove">移除一个元素</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data: function(){
    return {
      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)
    },
  }
}
</script>
 
<style>
  /** 方块元素的样式 **/
  .list-item {
    display: inline-block;
    margin-right: 10px;
    background-color: orange;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
  }
  /** 插入过程 **/
  .list-enter-active{
    transition: all 1s;
  }
  /** 移除过程 **/
  .list-leave-active {
    transition: all 1s;
  }
  /*** 开始插入、移除结束的位置变化 ***/
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
</style>

链接: 余下参考.

链接: 原文1.
链接: 原文2.