上节课我们使用了一个内定的class那么来设置动画v-enter-active向这样的className<Transition>组件为我们提供了6个，每一个都有特定的执行效果。

1. v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。

2. v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

3. v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。

4. v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。

5. v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

6. v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

根据这几个特定的className，我们来写代码尝试一下。

用<Transition>组件组件包裹hello world 这个div元素，然后声明一个变量isShow默认false，然后放置一个按钮，通过按钮点击事件触发handelClick方法来修改isShow为true或false从而事项div的显示和隐藏。

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!",
        isShow:false
      }
    },
    methods: {
      handelClick(){
        this.isShow = !this.isShow
      }
    },
    template: `
      <Transition>
        <div v-if="isShow">{{message}}</div>
      </Transition>
      <button @click="handelClick">开启/关闭</button>
    `
  })
  const vm = app.mount("#app")
</script>

最后在我们特定className 设置过渡效果。

<style>
  .v-enter-from{
    opacity: 0; /*定义进入过渡效果的起始值*/
  }
  .v-enter-active{
    transition: opacity 3s ease; /*定义进入过渡的执行效果*/
  }
  .v-enter-to{
    opacity:1   /*定义进入过渡的目标值*/
  }

  .v-leave-from{
    opacity: 1; /*定义离开过渡效果的起始值*/
  }
  .v-leave-active{
     transition: opacity 3s ease; /*定义离开过渡的执行效果*/
  }
  .v-leave-to{
    opacity: 0; /*定义离开过渡的目标值*/
  }

</style>

由于我们设置效果几乎是一直，我们可以将css进行合并一下，相同的东西就不要重复写了，这样看起来更合理一点

<style>
  .v-enter-active,.v-leave-active{
    transition: opacity 3s ease; /*定义进入过渡的执行效果*/ /*定义离开过渡的执行效果*/
  }

  .v-enter-to,.v-leave-from{
    opacity:1   /*定义进入过渡的目标值*/ /*定义离开过渡效果的起始值*/
  }

  .v-enter-from,.v-leave-to{
    opacity: 0; /*定义进入过渡效果的起始值*/ /*定义离开过渡的目标值*/
  }

</style>

为过渡效果命名

我们可以给 <Transition> 组件传一个 name prop 来声明为过渡效果命名。我们定义为fade

<Transition name="fade">
  <div v-if="isShow">{{message}}</div>
</Transition>

然后我们css里面className 需要将V前缀替换成我们设置这个名称fade。

<style>
  .fade-enter-active,.fade-leave-active{
    transition: opacity 3s ease; 
  }

  .fade-enter-to,.fade-leave-from{
    opacity:1;
  }

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

</style>

这样弄可以避免我们有多个<Transition>组件时的样式冲突。

自定义 className

除了能给过渡效果命名以外，我们还可以直接自定义过渡的className

你也可以向 <Transition> 传递以下的 props 来指定自定义的过渡 class：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

你传入的这些 class 会覆盖相应阶段的默认 class 名

我们修改enter-active-class 和 leave-active-class来演示一下。

template: `
      <Transition
        name="fade"
        enter-active-class="fadeIn"
        leave-active-class="fadeOut"
      >
        <div v-if="isShow">{{message}}</div>
      </Transition>
      <button @click="handelClick">开启/关闭</button>
    `

.fadeIn,.fadeOut{
   transition: opacity 3s ease; 
}

好，那么这节课先到这里结束了。