1：前后状态没切换

当我们想给一个进入或离开页面的元素添加动画效果时，可以使用Vue内置的Transition 组件.

但最近在实践时，发现自己完全按照官网给的提示去设置自定义动画却无法生效，后面找到原因如下：

先看下官网对Transition的介绍：

<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

由 v-if 所触发的切换

由 v-show 所触发的切换

由特殊元素 <component> 切换的动态组件

也就是说要想让Transition 的动画生效，你必须得出现状态的切换，也就是v-if或v-show所接的值需要在进入或离开DOM前后发生改变。

因此当你发现自己的自定义动画效果无法生效时，在排除了语法上的错误之后，你就得检查下，自己是不是忽视了状态切换这个部分。

比如：

<template>
    <transition name='fade'>
        <div v-if='visible'>
            ....
        </div>
    </transition>
    
</template>
<script lang='ts' setup>
    const visible=ref(false);
    onMounted(()=>{
        visible.value=true; // 这个状态切换代码记得加上,否则进入DOM时就没有动画效果。
    });
</script>

2：自定义样式位置没写对

假设有这么一个HTML代码,我应该如何去自定义动画fade的样式呢？

<transition name="fade">
    <div class="notification-notice" :class="horizontalClass">
      ....
    </div>
</transition>

一开始呢，我是参照官网的写法，直接在根位置加的样式，如：

<style lang='scss'>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  right: -300px;
}

.notification-notice{
  ...
  
  right:20px;
}
</style>

但实际发现上面这个样式在展示时根本不起作用，在排除了语法格式的问题后，发现是这个动画样式写的位置有误。

那应该怎么写呢？我们先看下自己定义的这些自定义样式都放在了哪里？

如图所示，自定义的动画样式会被自动添加到transition所包裹的最外层根元素上。

而如果你按照上面代码写法将自定义动画写在最外层，自定义动画类里的一些样式很有可能和根元素的另外一个类里定义的样式起冲突，进而导致动画不起作用。

所以为了确保动画样式能正常生效，就得按照样式的优先级去设置，即越具体，优先级越高。同样优先级的，后写的覆盖前写的。所以，在改成下面这种写法后，才让自定义动画的样式成功加上。

<style lang='scss'>

.notification-notice{
  ...
  right:20px;
  
  &.fade-enter-active,
  &.fade-leave-active {
    transition: opacity 0.5s ease;
  }

  &.fade-enter-from,
  &.fade-leave-to {
    opacity: 0;
    right: -300px;
  }
}
</style>

以上是自己使用transition时的采坑记录，看到后面可能会发现犯错的点很傻，但对我还是有价值的 :)

vue3给Transition设置自定义动画为何没用？

1：前后状态没切换

2：自定义样式位置没写对