VUE3中，transition 过渡组件使用

transition是vue中自带的一个过渡组件，非常的好用方便，通过这个组件，我们可以在使用 v-if，v-show或者v-for循环中定义一些过渡的渐变效果，下面直接上代码

首先用transition包裹你需要过渡的组件，值得一提的是，这个里面只能包含一个盒子，

首先上咱们第一个例子，这里我需要实现一种类似轮播图的效果，只不过我这个没有滑动，切换的时候过渡隐去第一个，然后后面的出来，这里的thisImg.img是一个双向绑定的变量，我让他每隔5s换一个src源（这个定时器切换就不写了哈），用transition包裹你的图片，这里需要注意一点：key是一定要绑定的，不然识别不出来

<template>
<transition name="fade" mode="out-in" appear>
    <img
      :key="thisImg.img"
       :src="thisImg.img"
       alt=""
     />
</transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

然后上第二个例子，这里我用v-show去展示或隐藏这个盒子，原理同上，只不过不需要去绑定一个key了

<template>   
<transition name="fade" mode="out-in">
      <div class="inputRec" v-show="isInputRec">
        <!-- <div class="inputRec" v-show="true"> -->
        <div class="todayHot">
          <div class="leftName">今日热搜</div>
          <div class="recInn" v-for="(item, index) in 8" :key="item.index">
            <div class="allName">
              <div class="recNum" :class="{ rec1: index == 0, rec2: index == 1, rec3: index == 2 }">
                {{ index + 1 }}
              </div>
              <div class="recName">软件名字哈哈哈哈</div>
            </div>
            <div class="isRecHot">热</div>
          </div>
        </div>
        <div class="allUse">
          <div class="rightName">大家都在用</div>
          <div class="allUseinn">
            <div class="allInnSof" v-for="(item, index) in 6" :key="index">
              <img src="https://lupic.cdn.bcebos.com/20220601/3086885792_14_600_429.jpg" alt="" />
              <div class="allName">
                <div class="allSofNa">爱奇艺</div>
                <!-- <div class="btns">安装</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

如果想看更多的，可以去vue的官网，下面奉上网址：内置组件 | Vue.js (vuejs.org)