vue提供内置组件transition进行状态变化的过渡

transition基本使用

基本使用

text
  <div>
    <p>Acom</p>
    <button @click="isShow = !isShow">change</button>
    <transition name="fade"><div v-if="isShow">这是个div</div></transition>
  </div>

当transition组件中的元素被插入或移除时：

1. Vue 会自动检测目标元素是否应用了 CSS 过渡或动画。如果是，则一些 css过渡或动画会在适当的时机被添加和移除。
2. 如果有作为监听器的 JavaScript 钩子，这些钩子函数会在适当时机被调用。
3. 如果没有探测到 CSS 过渡或动画、也没有提供 JavaScript 钩子，那么 DOM 的插入、删除操作将在浏览器的下一个动画帧后执行。

过渡类（vue3）

text
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-leave-from {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}

过渡类（vue2）

text
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}

也就是说，vue3的改动就是说把元素插入之前和元素离开之前的类改了名字，我说怎么写的时候进入时没动画，百度害*人~