Question

我有一个简单的问题。我正在建立一个使用vue垂直旋转的旋转木马。当用户点击前进按钮时，我希望vue使用我的＆＃39;转发＆＃39;来转换元素。过渡（将它们向下移动）。当用户点击后退按钮时，我希望vue使用我的＆＃39;后退＆＃39;来转换元素。过渡（向上移动）。

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

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

继承我的组成部分：

<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
}

最后添加备用carouselPrev css过渡类

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

使用＆条件＆＃39;用Vue过渡

1 个答案: