title: List animation one by one from bottom to top
body: <p>I'm trying to achieve animation effect like this</p>
  
  <p><a href="https://i.stack.imgur.com/nhFYs.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nhFYs.gif" alt="enter image description here"></a> </p>
  
  <p>Also I got simple Vue component for it</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;div v-if="cities[index]"&gt;
          {{ v-if="cities[index]" }}
      &lt;/div&gt;
      &lt;div class="disable" v-if="cities[index+ 1]"&gt;
          {{ v-if="cities[index+ 1]" }}
      &lt;/div&gt;
      &lt;button @click="index++"&gt;Next City&lt;/button&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data() {
         return {
            cities = [
               "San Francisco",
               "Seattle",
               "Chicago",
               "Atlanta"
            ],
          index: 0
         }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>So, I understand that I have to wrap each div into <strong>transition</strong> and add to it <strong>:key="index"</strong>, but my question is what kind of animation should I use for this case?</p>