参考手册
Vue 教程
Vue 动画
Vue 编译项目

Vue 动画使用 v-for

Vue 中内置的 <TransitionGroup> 组件帮助我们使用 v-for 为添加到页面中的元素设置动画。

<TransitionGroup> 组件

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

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

只有当我们使用标记 prop 将 <TransitionGroup> 组件定义为特定标记时，它才会呈现为 HTML 标记，如下所示：

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

这是 Vue 渲染后上面代码的结果:

  1. <ol>
  2.   <li>Apple</li>
  3.   <li>Pizza</li>
  4.   <li>Rice</li>
  5. </ol>

我们现在可以添加 CSS 代码来在新项目添加到列表中时为其设置动画:

  1. <style>
  2.   .v-enter-from {
  3.     opacity: 0;
  4.     rotate: 180deg;
  5.   }
  6.   .v-enter-to {
  7.     opacity: 1;
  8.     rotate: 0deg;
  9.   }
  10.   .v-enter-active {
  11.     transition: all 0.7s;
  12.   }
  13. </style>

在本例中，只需将新项目添加到 'products' 数组中即可设置动画

实例

App.vue:

  1. <template>
  2.   <h3>The <TransitionGroup> Component</h3>
  3.   <p>New products are given animations using the <TransitionGroup> component.</p>
  4.   <input type="text" v-model="inpName">
  5.   <button @click="addEl">Add</button>
  6.   <TransitionGroup tag="ol">
  7.     <li v-for="x in products" :key="x">
  8.       {{ x }}
  9.     </li>
  10.   </TransitionGroup>
  11. </template>
  13. <script>
  14.   export default {
  15.     data() {
  16.       return {
  17.         products: ['Apple','Pizza','Rice'],
  18.         inpName: ''
  19.       }
  20.     },
  21.     methods: {
  22.       addEl() {
  23.         const el = this.inpName;
  24.         this.products.push(el);
  25.         this.inpName = null;
  26.       }
  27.     }
  28.   }
  29. </script>
  31. <style>
  32.   .v-enter-from {
  33.     opacity: 0;
  34.     rotate: 180deg;
  35.   }
  36.   .v-enter-to {
  37.     opacity: 1;
  38.     rotate: 0deg;
  39.   }
  40.   .v-enter-active {
  41.     transition: all 0.7s;
  42.   }
  43. </style>
运行一下

添加和删除元素

当移除其他元素之间的元素时，其他元素将落在移除元素所在的位置。为了设置移除元素时列表项的其余部分如何就位的动画，我们将使用自动生成的 v-move 类。

但首先，让我们看一个实例，在该实例中，当移除一个元素时，其他项目是如何就位的，但 没有 设置动画：

实例

App.vue:

  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>
运行一下

正如你在上面的例子中看到的，当一个项目被移除时，被移除项目之后的项目会突然跳到它们的新位置。为了在移除项目时为其余项目设置动画，我们使用自动生成的 v-move 类。

当移除项目时，v-move 类会为其他元素设置动画，但有一个问题：移除的项目仍然存在并占据位置，直到它被移除，因此 v-move 类别不会有任何效果。为了给 v-move 类一些动画，我们可以给 v-leave-active 类设置 position: absolute;。在删除期间设置，则删除的项目仍然可见，但不会占据位置。

在这个例子中，与上一个例子的唯一区别是在第 14 行和第 17 行添加了两个新的 CSS 类：

实例

App.vue:

  1. <style>
  2. .v-enter-from {
  3.   opacity: 0;
  4.   translate: 200px 0;
  5.   rotate: 360deg;
  6. }
  7. .v-enter-to {
  8.   opacity: 1;
  9.   translate: 0 0;
  10.   rotate: 0deg;
  11. }
  12. .v-enter-active,
  13. .v-leave-active,
  14. .v-move {
  15.   transition: all 0.7s;
  16. }
  17. .v-leave-active { position: absolute; }
  18. .v-leave-from { opacity: 1; }
  19. .v-leave-to { opacity: 0; }
  20. .diceDiv {
  21.   margin: 10px;
  22.   width: 30px;
  23.   height: 30px;
  24.   line-height: 30px;
  25.   vertical-align: middle;
  26.   text-align: center;
  27.   border: solid black 1px;
  28.   border-radius: 5px;
  29.   display: inline-block;
  30. }
  31. </style>
运行一下

一个更大的实例

让我们用上面的例子作为一个新例子的基础。

在这个例子中，当添加或删除一个新项目时，或者当对整个数组进行排序时，整个列表是如何设置动画的就变得更加清晰了。

在本例中，我们可以：

  • 通过单击删除项目
  • 对项目进行排序
  • 在列表中的任意位置添加新项目
实例

App.vue:

  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>
运行一下
Vue 动画
Vue 编译项目

分类导航

C 语言C++C#JavaPHPPYTHONGONode.jsPandasR 语言DjangoMatplotlibVB 教程ABAP 教程Fiori 教程汇编语言.NET Core 教程ASP.NET Core 教程Vue 教程Numpy机器学习SciPy