vue3.0 ＜transition＞ 过渡动画组件的使用详解 使用＜transition＞切换标签时没有效果？如何解决？_vue translattion enter-active不起作用怎么办

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点
  

过渡的类名

进入enter

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
   在vue3.0中的语法 v-enter-from

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

离开leave

1. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

2. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

3. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave 被删除)，在过渡/动画完成之后移除。

---

大家是不是都很好奇v-里的v是什么呢？

v-相当于name属性里的参数fade，如果没有name属性的话，就需要使用v-是他默认的机制。

<transition  name="fade"></transition>
1

如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为my-transition-enter。

---

基本实例

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
1
2
3
4
5
6
7
8

setup(){
const show = ref(true)
}
1
2
3

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
1
2
3
4
5
6

---

经常容易遇见的小问题，相同的标签名切换时没有动画效果

比如这两个都是<p>标签,就会出现问题

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
    <p v-else>你好</p>
  </transition>
</div>
1
2
3
4
5
6
7
8
9

setup(){
const show = ref(true)
}
1
2
3

问题是怎么产生的呢？

在vue中当有相同标签名的元素切换时，需要通过key属性设置唯一的值来标记，让Vue区分他们，否则Vue为了效率和提高性能，只会替换相同标签内部的内容。不会创建新的元素，即使在计算上没有必要，但是给在 <transition>组件中的多个元素设置key是一个更好的实践

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show" key="1">hello</p>
    <p v-else  key="2" >你好</p>
  </transition>
</div>
1
2
3
4
5
6
7
8
9

这样就解决相同的标签名切换时没有动画效果的问题了