vue.js的transition动画中,v-if和v-show在表现上有什么差异?

Question

<template>
  <div class="slider-show" @mouseover="clearInv" @mouseout="runInv">
    <div class="slide-img">
        <transition name="slide-trans">
          <img v-if="isShow" :src="img[nowIndex].src">
        </transition>
        <transition name="slide-trans-old">
          <img v-if="!isShow" :src="img[nowIndex].src">
        </transition>
    </div>
    <div class="mask">
      <h2 class="img-title">{{img[nowIndex].title}}</h2>
      <ul class="control">
        <li @click="goto (prevIndex)">&lt;</li>
        <li v-for="(item,index) in img">
          <a :class="{'on' : index === nowIndex}" @click="goto (index)">
            {{index + 1}}
          </a>
        </li>
        <li @click="goto (nextIndex)">&gt;</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      inv: 2000,
      nowIndex: 0,
      isShow: true,
      img: [
        {
          src: require('../assets/slideShow/pic1.jpg'),
          title: '数据统计',
          toKey: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic2.jpg'),
          title: '数据预测',
          toKey: 'detail/count'
        },
        {
          src: require('../assets/slideShow/pic3.jpg'),
          title: '数据分析',
          toKey: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic4.jpg'),
          title: '广告发布',
          toKey: 'detail/forecast'
        }
      ]
    }
  },
  computed: {
    prevIndex () {
      if (this.nowIndex === 0) {
        return this.img.length - 1
      } else {
        return this.nowIndex - 1
      }
    },
    nextIndex () {
      if (this.nowIndex === this.img.length - 1) {
        return 0
      } else {
        return this.nowIndex + 1
      }
    }
  },
  methods: {
    goto (index) {
      this.isShow = false
      setTimeout(() => {
        this.nowIndex = index
        this.isShow = true
      }, 1000)
    },
    runInv () {
      this.invId = setInterval(() => {
        this.goto(this.nextIndex)
      }, this.inv)
    },
    clearInv () {
      clearInterval(this.invId)
    }
  },
  mounted () {
    this.runInv()
  }
}
</script>

<style scoped>
/*动画样式*/
.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}
.slider-show {
  width: 900px;
  height: 500px;
  position: relative;
  margin-top: 15px;
  overflow: hidden;
}
.slide-img {
  height: 100%;
}
.slide-img img {
  position: absolute;
  top: 0;
}
.img-title {
  font-size: 14px;
  color: #ddd;
}
.control {
  position: absolute;
  right: 0;
  bottom: 0;
}
.control li {
  float: left;
  cursor: pointer;
  color: #fff;
  margin-right: 22px;
}
.on {
  text-decoration: underline;
}
.mask {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 30px;
  height: 30px;
  background-color: rgba(0,0,0,0.5);
  padding-left: 20px;
  z-index: 999;
}
</style>

如上,一个轮播图组件,基于轮播图会频繁变换及性能的考虑,第5和第8行我本用的是v-show,然后调试发现进入和退出的动画的对象都是新图,头都想秃掉了,才把v-show换成了v-if,成功...

所以是为什么啊喂~!

我所知的v-if和v-show的区别是:
1.前者是不满足条件时不渲染dom树上无内容;
2.后者是渲染并用css的display:none方式隐藏.

但为什么在表现上回出现这样的差异呢?
求指教~谢谢~!(/ω＼)

Answer 1

src="img[nowIndex].src" 一样的啊