使用Vue进行"条件"转换

Question

我有一个简单的问题.我正在建立一个使用vue垂直旋转的旋转木马.当用户单击前进按钮时,我希望vue使用我的"前进"过渡(向下移动)来转换元素.当用户单击向后按钮时,我希望vue使用我的"向后"转换(向上移动)来转换元素.

现在,我只有一个转换执行我的前向转换,无论用户是向前还是向后导航.

有没有办法实现这个目标？

继承我的组成部分:

<template>
<div class="carousel__container">
    <div class="carousel__visible">
        <div class="carousel__slides">

            <transition-group name="carouselNext">
                <div v-for="(quote, index) in quotes" class="carousel__slide" key="index" v-show="index === currentSlide">
                    <blockquote>{{ quote.quote }}</blockquote>
                    <cite>{{ quote.cite }}</cite>                   
                </div>
            </transition-group>

        </div>


    </div>

    <button class="btn btn--alt" @click="prev">Back</button>

    <button class="btn btn--primary" @click="next">Next</button>
</div>

谢谢!

Answer 1

最简单的办法是改变基于方向转换名称 <transition-group name="carouselNext">可以成为<transition-group :name="direction">

添加新direction数据var并包括基于方法的切换

prev(){
  this.direction = "carouselPrev"
  this.currentSlide = (this.currentSlide + this.quotes.length - 1)%this.quotes.length
},
next(){
  this.direction = "carouselNext"
  this.currentSlide = (this.currentSlide + 1)%this.quotes.length
}

最后添加备用carouselPrevcss转换类

这是一个工作示例https://codepen.io/scorch/pen/NwwpxM