一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。

前言

在上一篇的文章中，我们了解了vue里面transition标签来实现单元素组件的过渡和动画效果，还知道了transition中一些属性和钩子函数的用法，本章节继续带着大家一起了解transition的更多用法。

开篇

前面几篇动画内容，都是基于transition标签做的单元素过渡效果和动画效果，今天的章节中还是会继续使用transition标签去做多组件/元素切换动画的效果。

元素切换

多元素切换的效果样式和之前的单元素动画效果是一样的，因为我们使用的还是transition标签，而它的样式名称都是固定的写法，所以我们不需要修改什么内容了。

<style>
    .v-enter-from,
    .v-leave-to{
      opacity: 0;
    }
    .v-enter-active, 
    .v-leave-active{
      transition: opacity 2s ease-in;
    }
    .v-enter-to, 
    .v-leave-from{
      opacity: 1;
    }
</style>

在模板元素中，我们会在transition标签下面再添加一个元素，使用v-if标签进行显隐的效果。

<script>
  const app = Vue.createApp({
    data(){
      return {
        show: true
      }
    },
    methods: {
      handleClick(){
        this.show = !this.show
      },
    },
    template: `
      <div>
        <transition>
          <div v-if="show">Hello</div>
          <div v-else="show">Bye</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');

</script>

在浏览器中会发现两个元素好像是同步执行的，也就是一个元素在淡出的时候，另一个元素也在做淡入的效果。

一般需求中都会要求一个元素执行完成的同时另外一个元素也开始执行动画效果了。

这时候就需要引入transition标签中另外一个属性值mode

属性mode

mode有两个值：in-out先淡入再淡出、out-in先淡出再淡入

template: `
  <div>
    <transition mode="out-in">
      <div v-if="show">Hello</div>
      <div v-else="show">Bye</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

chrome-capture (1).gif

现在就可以完美解决动画同步的问题了，但是又有一个新的问题出现了，就是页面刷新的时候，是没有入场动画效果的。

其实transition标签也给我们解决了这个问题，它有一个属性值appear

属性appear

appear默认值是false，在标签上直接写appear的时候，就表示appear = true了

template: `
  <div>
    <transition mode="out-in" appear>
      <div v-if="show">Hello</div>
      <div v-else="show">Bye</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

chrome-capture (2).gif

此时浏览器上就会在刷新页面的时候出现入场动画了。

元素切换动画的效果已经没问题了，那如果把元素改成组件会怎样呢？

组件切换

组件模板效果还是沿用上面的样式，再新增两个局部组件，在根组件中使用components引用子组件，最后在根组件模板中调用子组件标签。

两个局部组件是定义在根组件上面的哦。

const ComponentA = {
    template: `
      <div>JueJin</div>
    `
}
const ComponentB = {
    template: `
      <div>SeeYou</div>
    `
}

根组件中引用子组件时需要转换成使用-分割的标签名

components: {
  'component-a': ComponentA,
  'component-b': ComponentB
},

根组件模板中引用子组件标签时，同时也使用v-if指令和v-else指令去判断。

template: `
  <div>
    <transition mode="out-in" appear>
      <component-a v-if="show" />
      <component-b v-else="show" />
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

chrome-capture (3).gif

其实使用组件去做动画切换的效果和元素动画切换效果是一样的，但是以前的文章中我们有用过一个component标签去做组件之间的动态切换效果，也是可以直接在这里使用的哦。

const app = Vue.createApp({
    data(){
      return {
        component: 'component-a'
      }
    },
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB
    },
    methods: {
      handleClick(){
        this.component === 'component-a' ? 
        this.component = 'component-b' : this.component = 'component-a'
      },
    },
    template: `
      <div>
        <transition mode="out-in" appear>
          <component :is="component" />
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

data中定义一个参数值等于某个组件名称，component标签中绑定is属性并赋上data中定义的参数值，点击按钮时就可以直接改变data中的参数值，从而改变组件切换动画效果。

总结

本章节主要讲解了多元素和多组件之间的动画切换效果，还补充了transition标签上的两个属性mode、appear。希望大家能够熟练使用这些效果和属性哦。一起加油！！！

【Vue3从零开始-第四章】4-4 组件和元素切换动画

前言

开篇

元素切换

属性mode

属性appear

组件切换

总结