参考手册
Vue 内置组件
Vue Transition 组件
返回 Vue 内置组件

Vue <TransitionGroup> 组件

实例

使用内置的 <TransitionGroup> 组件创建一个 <ol> 标签，其中包含动画 <li> 标签。

  1. <TransitionGroup tag="ol">
  2.   <li v-for="x in products" :key="x">
  3.     {{ x }}
  4.   </li>
  5. </TransitionGroup>
运行一下

定义与用法

内置的 <TransitionGroup> 组件用于使用 v-for 创建的元素，以便在添加或删除这些元素时为其提供单独的动画。

在 <TransitionGroup> 组件内使用 v-for 创建的标签必须使用 key 属性进行唯一定义。

只有当我们使用标签 prop 将 <TransitionGroup> 组件定义为特定标签时，它才会被呈现为 HTML 标签。

当在 <TransitionGroup> 组件内使用 v-for 基于数组创建标签时，当元素添加到数组或从数组中删除时，这些标签将自动设置动画。

Props

内置 <TransitionGroup> 组件可以与内置 <Transition> 组件使用相同的 prop：

Prop描述试一试
none默认。试一试
tag<TransitionGroup> 呈现为指定的标签。如果未设置标签 prop，则 <TransitionGroup> 将不会呈现为标签。试一试
moveClass为 move 类创建一个自定义的名称。默认名称是 v-move试一试

更多实例

实例 1

骰子可以添加或移除，添加的骰子使用 <TransitionGroup> 设置动画：

  1. <template>
  2.   <h3>The <TransitionGroup> Component</h3>
  3.   <p>New products are given animations using the <TransitionGroup> component.</p>
  4.   <button @click="addDie">Roll</button>
  5.   <button @click="removeDie">Remove random</button><br>
  6.   <TransitionGroup>
  7.     <div v-for="x in dice" :key="x" class="diceDiv" :style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }">
  8.       {{ x }}
  9.     </div>
  10.   </TransitionGroup>
  11. </template>
  13. <script>
  14.   export default {
  15.     data() {
  16.       return {
  17.         dice: [],
  18.         inpName: ''
  19.       }
  20.     },
  21.     methods: {
  22.       addDie() {
  23.         const newDie = Math.ceil(Math.random()*6);
  24.         this.dice.push(newDie);
  25.       },
  26.       removeDie() {
  27.         if(this.dice.length>0){
  28.           this.dice.splice(Math.floor(Math.random()*this.dice.length), 1);
  29.         }
  30.       }
  31.     },
  32.     mounted() {
  33.       this.addDie();
  34.       this.addDie();
  35.       this.addDie();
  36.     }
  37.   }
  38. </script>
  40. <style>
  41. .v-enter-from {
  42.   opacity: 0;
  43.   translate: 200px 0;
  44.   rotate: 360deg;
  45. }
  46. .v-enter-to {
  47.   opacity: 1;
  48.   translate: 0 0;
  49.   rotate: 0deg;
  50. }
  51. .v-enter-active,
  52. .v-leave-active {
  53.   transition: all 0.7s;
  54. }
  55. .v-leave-from { opacity: 1; }
  56. .v-leave-to { opacity: 0; }
  57. .diceDiv {
  58.   margin: 10px;
  59.   width: 30px;
  60.   height: 30px;
  61.   line-height: 30px;
  62.   vertical-align: middle;
  63.   text-align: center;
  64.   border: solid black 1px;
  65.   border-radius: 5px;
  66.   display: inline-block;
  67. }
  68. </style>
运行一下
实例 2

骰子可以添加或移除，添加和移除的骰子都使用 <TransitionGroup> 设置动画：

  1. <template>
  2.   <h3>The <TransitionGroup> Component</h3>
  3.   <p>When an item is removed inside the <TransitionGroup> component, other items are animated as they fall into their new positions.</p>
  4.   <button @click="addDie">Roll</button>
  5.   <button @click="removeDie">Remove random</button><br>
  6.   <TransitionGroup>
  7.     <div v-for="x in dice" :key="x" class="diceDiv" :style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }">
  8.       {{ x }}
  9.     </div>
  10.   </TransitionGroup>
  11. </template>
  13. <script>
  14.   export default {
  15.     data() {
  16.       return {
  17.         dice: [],
  18.         inpName: ''
  19.       }
  20.     },
  21.     methods: {
  22.       addDie() {
  23.         const newDie = Math.ceil(Math.random()*6);
  24.         this.dice.push(newDie);
  25.       },
  26.       removeDie() {
  27.         if(this.dice.length>0){
  28.           this.dice.splice(Math.floor(Math.random()*this.dice.length), 1);
  29.         }
  30.       }
  31.     },
  32.     mounted() {
  33.       this.addDie();
  34.       this.addDie();
  35.       this.addDie();
  36.     }
  37.   }
  38. </script>
  40. <style>
  41. .v-enter-from {
  42.   opacity: 0;
  43.   translate: 200px 0;
  44.   rotate: 360deg;
  45. }
  46. .v-enter-to {
  47.   opacity: 1;
  48.   translate: 0 0;
  49.   rotate: 0deg;
  50. }
  51. .v-enter-active,
  52. .v-leave-active,
  53. .v-move {
  54.   transition: all 0.7s;
  55. }
  56. .v-leave-active { position: absolute; }
  57. .v-leave-from { opacity: 1; }
  58. .v-leave-to { opacity: 0; }
  59. .diceDiv {
  60.   margin: 10px;
  61.   width: 30px;
  62.   height: 30px;
  63.   line-height: 30px;
  64.   vertical-align: middle;
  65.   text-align: center;
  66.   border: solid black 1px;
  67.   border-radius: 5px;
  68.   display: inline-block;
  69. }
  70. </style>
运行一下
实例 3

骰子可以添加、移除、洗牌或排序，所有动画都使用 <TransitionGroup>：

  1. <template>
  2.   <h3>The <TransitionGroup> Component</h3>
  3.   <p>Items inside the <TransitionGroup> component are animated when they are created or removed.</p>
  4.   <button @click="addDie">Roll</button>
  5.   <button @click="addDie10">Roll 10 dice</button>
  6.   <button @click="dice.sort(compareFunc)">Sort</button>
  7.   <button @click="dice.sort(shuffleFunc)">Shuffle</button><br>
  8.   <TransitionGroup>
  9.     <div 
  10.     v-for="x in dice" 
  11.     :key="x.keyNmbr" 
  12.     class="diceDiv" 
  13.     :style="{ backgroundColor: 'hsl('+x.dieNmbr*60+',85%,85%)' }"
  14.     @click="removeDie(x.keyNmbr)">
  15.       {{ x.dieNmbr }}
  16.     </div>
  17.   </TransitionGroup>
  18. </template>
  20. <script>
  21.   export default {
  22.     data() {
  23.       return {
  24.         dice: [],
  25.         keyNumber: 0
  26.       }
  27.     },
  28.     methods: {
  29.       addDie() {
  30.         const newDie = {
  31.           dieNmbr: Math.ceil(Math.random()*6),
  32.           keyNmbr: this.keyNumber
  33.         };
  34.         this.dice.splice(Math.floor(Math.random()*this.dice.length),0,newDie);
  35.         this.keyNumber++;
  36.       },
  37.       addDie10() {
  38.         for(let i=0; i<10; i++) {
  39.           this.addDie();
  40.         }
  41.       },
  42.       compareFunc(a,b){
  43.         return a.dieNmbr - b.dieNmbr;
  44.       },
  45.       shuffleFunc(a,b){
  46.         return Math.random()-0.5;
  47.       },
  48.       removeDie(key) {
  49.         const pos = this.dice.map(e => e.keyNmbr).indexOf(key);
  50.         this.dice.splice(pos, 1);
  51.       }
  52.     },
  53.     mounted() {
  54.       this.addDie10();
  55.     }
  56.   }
  57. </script>
  59. <style>
  60. .v-enter-from {
  61.   opacity: 0;
  62.   scale: 0;
  63.   rotate: 360deg;
  64. }
  65. .v-enter-to {
  66.   opacity: 1;
  67.   scale: 1;
  68.   rotate: 0deg;
  69. }
  70. .v-enter-active,
  71. .v-leave-active,
  72. .v-move {
  73.   transition: all 0.7s;
  74. }
  75. .v-leave-active { position: absolute; }
  76. .v-leave-from { opacity: 1; }
  77. .v-leave-to { opacity: 0; }
  78. .diceDiv {
  79.   margin: 10px;
  80.   width: 30px;
  81.   height: 30px;
  82.   line-height: 30px;
  83.   vertical-align: middle;
  84.   text-align: center;
  85.   border: solid black 1px;
  86.   border-radius: 5px;
  87.   display: inline-block;
  88. }
  89. .diceDiv:hover {
  90.   cursor: pointer;
  91.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  92. }
  93. #app {
  94.   position: relative;
  95. }
  96. </style>
运行一下
实例 4

使用 moveClass 重命名 move 类：

  1. <template>
  2.   <h3>The <TransitionGroup> Component</h3>
  3.   <p>When an item is removed inside the <TransitionGroup> component, other items are animated as they fall into their new positions.</p>
  4.   <button @click="addDie">Roll</button>
  5.   <button @click="removeDie">Remove random</button><br>
  6.   <TransitionGroup moveClass="good-slide">
  7.     <div
  8.     v-for="x in dice"
  9.     :key="x"
  10.     class="diceDiv"
  11.     :style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }"
  12.     >
  13.       {{ x }}
  14.     </div>
  15.   </TransitionGroup>
  16. </template>
  18. <script>
  19.   export default {
  20.     data() {
  21.       return {
  22.         dice: [],
  23.         inpName: ''
  24.       }
  25.     },
  26.     methods: {
  27.       addDie() {
  28.         const newDie = Math.ceil(Math.random()*6);
  29.         this.dice.push(newDie);
  30.       },
  31.       removeDie() {
  32.         if(this.dice.length>0){
  33.           this.dice.splice(Math.floor(Math.random()*this.dice.length), 1);
  34.         }
  35.       }
  36.     },
  37.     mounted() {
  38.       this.addDie();
  39.       this.addDie();
  40.       this.addDie();
  41.     }
  42.   }
  43. </script>
  45. <style>
  46. .v-enter-from {
  47.   opacity: 0;
  48.   translate: 200px 0;
  49.   rotate: 360deg;
  50. }
  51. .v-enter-to {
  52.   opacity: 1;
  53.   translate: 0 0;
  54.   rotate: 0deg;
  55. }
  56. .v-enter-active,
  57. .v-leave-active,
  58. .good-slide {
  59.   transition: all 0.7s;
  60. }
  61. .v-leave-active { position: absolute; }
  62. .v-leave-from { opacity: 1; }
  63. .v-leave-to { opacity: 0; }
  64. .diceDiv {
  65.   margin: 10px;
  66.   width: 30px;
  67.   height: 30px;
  68.   line-height: 30px;
  69.   vertical-align: middle;
  70.   text-align: center;
  71.   border: solid black 1px;
  72.   border-radius: 5px;
  73.   display: inline-block;
  74. }
  75. </style>
运行一下
Vue Transition 组件

分类导航