title: Using 'conditional' transitions with Vue
body: <p>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).</p>
  
  <p>Right now, I just have one transition that performs my forward transition, whether the user is navigating forward or backward.</p>
  
  <p>Is there any way to accomplish this?</p>
  
  <p>Heres my component:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="carousel__container"&gt;
      &lt;div class="carousel__visible"&gt;
          &lt;div class="carousel__slides"&gt;
  
              &lt;transition-group name="carouselNext"&gt;
                  &lt;div v-for="(quote, index) in quotes" class="carousel__slide" key="index" v-show="index === currentSlide"&gt;
                      &lt;blockquote&gt;{{ quote.quote }}&lt;/blockquote&gt;
                      &lt;cite&gt;{{ quote.cite }}&lt;/cite&gt;                   
                  &lt;/div&gt;
              &lt;/transition-group&gt;
  
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;button class="btn btn--alt" @click="prev"&gt;Back&lt;/button&gt;
  
      &lt;button class="btn btn--primary" @click="next"&gt;Next&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thanks!</p>