Vueの

Question

と「条件付き」トランジションを使用して、私は単純な質問のようなものを持っています。私はvueを使用して垂直に回転するカルーセルを構築する。ユーザーがフォワードボタンをクリックすると、私はvueを 'フォワード'遷移を使用して要素をin/outに遷移させたい（それらを下に移動する）。ユーザーが逆方向ボタンをクリックすると、私は '逆方向'の遷移を使って要素をin/outに遷移させたい（それらを上に移動する）。

は今、私は、ユーザーが前方または後方にナビゲートしているかどうか、私の前方の移行を行い、一つの遷移を持っています。

これを実現する方法はありますか？

HERESに私のコンポーネント：

<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

です