Advertisement

使用vue2 animate背景图片渐入渐出轮换效果

阅读量:

无需过多赘述,以下是相关代码实现

复制代码
    <template>
      <div>
    <!-- 使用animate插件实现图片的动态切换 -->
    <transition
      appear
      name="animate__animated animate__bounce animate__slower	"
      enter-active-class="animate__fadeIn"
      leave-active-class="animate__fadeOut"
      v-for="index in classObj.length"
      :key="index"
    >
      <!-- 背景图片轮换 -->
      <div class="mainSize" :class="classObj[index-1]" v-show="isShow===index-1"></div>
    </transition>
    
    <div class="bodySize">
      <NavMenu></NavMenu>
    </div>
      </div>
    </template>
    
    <script>
    import "animate.css";

全部评论 (0)

还没有任何评论哟~