1回答

死亡之翼death

提问者

2017-08-21

自己搞定了，给data中增加一个变量direction。为<transition>的name设置绑定，name值是变量，会根据direction而变化。

具体如下

html代码：

<transition v-bind:name="'carousel-trans-' + direction + '-old'">
        <!-- isShow: false -> true
        取反后: true -> false(从显示到消失) -->
          <img v-if="!isShow" :src="pics[currentIndex].src">
</transition>
<transition v-bind:name="'carousel-trans-' + direction ">
        <!-- isShow: false -> true -->
        <!-- 从消失到显示 -->
          <img v-if="isShow" :src="pics[currentIndex].src">
 </transition>

script：

data () {
    return {
      currentIndex:0,
      isShow:true,
      direction:'toleft'
    }
  },
  computed:{
    prevIndex(){
      this.direction = 'toleft'
      if (this.currentIndex <= 0) {
        return this.pics.length - 1
      }
      return this.currentIndex - 1
    },
    nextIndex(){
      this.direction = 'toright'
      if (this.currentIndex >= this.pics.length - 1) {
        return 0
      }
      return this.currentIndex + 1
    }
  },

css(less)

.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{
  transition:all 0.5s;
}
.carousel-trans-toleft-enter{
  transform:translateX(940px); //新图片从右侧940px进入
}
.carousel-trans-toleft-old-leave-active{
  transform:translateX(-940px);  //老图片向左侧940px出去
}
.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{
  transition:all 0.5s;
}
.carousel-trans-toright-enter{
  transform:translateX(-940px); //新图片从右侧940px进入
}
.carousel-trans-toright-old-leave-active{
  transform:translateX(940px);  //老图片向左侧940px出去
}

3

0