前端必知必会-Vue动画Animations-Transition ‘name‘ 属性

---

Transition ‘name’ 属性

如果您有多个 组件，但您希望至少一个 组件具有不同的动画，则需要为 组件指定不同的名称以区分它们。

我们可以使用 name 属性选择 组件的名称，这也会更改过渡类的名称，以便我们可以为该组件设置不同的 CSS 动画规则。

如果过渡名称属性值设置为 ‘swirl’，则自动可用的类现在将以 ‘swirl-’ 而不是 ‘v-’ 开头：

swirl-enter-from
swirl-enter-active
swirl-enter-to
swirl-leave-from
swirl-leave-active
swirl-leave-to
在下面的示例中，我们使用 name 属性为 组件提供不同的动画。一个 组件没有指定名称，因此使用自动生成的以“v-”开头的 CSS 类为其指定动画。另一个 组件被指定为“swirl”，因此可以使用自动生成的以“swirl-”开头的 CSS 类为其指定动画规则。

示例
App.vue:

<template>
<h1>添加/删除 <p> 标签h1>
<p>本示例中的第二个转换具有名称 prop“swirl”，因此我们可以使用不同的类名将转换区分开。p>
<hr>
<button @click="this.p1Exists = !this.p1Exists">{{btn1Text} button><br>
<Transition>
<p v-if="p1Exists" id="p1">Hello World!p>
Transition>
<hr>
<button @click="this.p2Exists = !this.p2Exists">{{btn2Text} button><br>
<Transition name="swirl">
<p v-if="p2Exists" id="p2">Hello World!p>
Transition>
template>

<script>
export default {
data() {
return {
p1Exists: false,
p2Exists: false
}
},
computed: {
btn1Text() {
if(this.p1Exists) {
return 'Remove';
}
else {
return 'Add';
}
},
btn2Text() {
if(this.p2Exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
}
script>

<style>
.v-enter-active {
    background-color: lightgreen;
    animation: added 1s;
  }
  .v-leave-active {
    background-color: lightcoral;
    animation: added 1s reverse;
  }
  @keyframes added {
    from {
      opacity: 0;
      translate: -100px 0;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  .swirl-enter-active {
    animation: swirlAdded 1s;
  }
  .swirl-leave-active {
    animation: swirlAdded 1s reverse;
  }
  @keyframes swirlAdded {
    from {
      opacity: 0;
      rotate: 0;
      scale: 0.1;
    }
    to {
      opacity: 1;
      rotate: 360deg;
      scale: 1;
    }
  }
  #p1, #p2 {
    display: inline-block;
    padding: 10px;
    border: dashed black 1px;
  }
  #p2 {
    background-color: lightcoral;
  }
style>

---

# 总结
本文介绍了Vue动画Animations-Transition 'name' 属性的使用，如有问题欢迎私信和评论