Using 'conditional' transitions with Vue

Question

I have a sort of simple question. Im building a carousel which rotates vertically using vue. When the user clicks the forward button, I want vue to transition the elements in/out using my 'forward' transition (moving them down). When the user clicks the backward button, I want vue to transition the elements in/out using my 'backward' transition (moving them up).

Right now, I just have one transition that performs my forward transition, whether the user is navigating forward or backward.

Is there any way to accomplish this?

Heres my component:

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

Thanks!

Daniel · Accepted Answer · 2020-02-27 16:11:17Z

10

Easiest way is to change the transition name based on direction <transition-group name="carouselNext"> can become <transition-group :name="direction">

add new direction data var and include toggling based on methods

    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
    }

and finally add the alternate carouselPrev css transition classes

here's a working example https://codepen.io/scorch/pen/NwwpxM

edited Feb 27, 2020 at 16:11

answered Nov 17, 2017 at 3:53

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using 'conditional' transitions with Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related