title: Vue Transition Not Affecting Each Element
body: <p>I have a container with two elements that I would like to toggle with a click. </p>
  
  <p>I'd like to have the visible element slide out while the new element slides in, but the transition only affects the first child (i.e. logo) while the second child (i.e. version) does a simple show/hide. Switching the order of the children doesn't help.</p>
  
  <p><strong>Markup in component.vue</strong></p>
  
  <pre><code>&lt;div class="brand-container" @click="toggleLogoBox"&gt;
    &lt;div class="logo" v-show="logoVisible" transition="slide"&gt;
      &lt;img src="../assets/images/logo.svg"&gt;
    &lt;/div&gt;
    &lt;div class="version" v-show="versionVisible" transition="slide"&gt;
      &lt;div class="label"&gt;Motor Club&lt;/div&gt;
      &lt;div class="number"&gt;{{ version }}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; &lt;!-- brand-container --&gt;
  </code></pre>
  
  <p><strong>Logic in component.vue</strong></p>
  
  <pre><code>methods: {
    toggleLogoBox: function () {
      this.logoVisible = !this.logoVisible;
      this.versionVisible = !this.versionVisible;
    },
    // ...
  </code></pre>
  
  <p><strong>Transition</strong></p>
  
  <pre><code>.slide-transition {
    transition: all .4s cubic-bezier(.25,.1,.25,1);
  }
  
  .slide-enter {
    transform: translate3d(25%, 0, 0);
    opacity: 0;
  }
  
  .slide-leave {
    transform: translate3d(-25%, 0, 0);
    opacity: 0;
  }
  </code></pre>