title: Can't make Vue.js transition work properly
body: <p>I have a list of items displayed via <code>v-for</code>. By default only the summary part of each item shows up. When clicking on an item, the details part of the item is displayed.</p>
  <p>This is accomplished by adding/removing an <code>active</code> class, and toggling <code>display: block</code> / <code>display: none</code> on the item's details part.</p>
  <p>Now I want to add smooth transitions. I followed <a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">the first example in the docs</a>. But I can't figure out how to make it work as expected. Currently the transition doesn't work at all: the details part appears instantly when clicking on the item, and disappears instantly when clicking again.</p>
  <p>What's wrong with my code?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .event-details {
        display: none;
      }
      
      .event.active .event-details-enter-active,
      .event.active .event-details-leave-active {
        transition: opacity .5s;
        transition: height .5s;
      }
      
      .event.active .event-details-enter,
      .event.active .event-details-leave-to {
        opacity: 0;
        display: none;
        height: 0;
      }
      
      .event.active .event-details-enter,
      .event.active .event-details-leave-to {
        opacity: 1;
        display: block;
        height: auto;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  
  &lt;li :class="{ active: event.active }" v-for="event in events" @click="showEvent(event)"&gt;
        &lt;div class="event-summary"&gt;
          content
        &lt;/div&gt;
        &lt;transition name="event-details"&gt;
          &lt;div class="event-details"&gt;
            content
          &lt;/div&gt;
        &lt;/transition&gt;
      &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>EDIT: here's a <code>console.log</code> of the events array:</p>
  <p><a href="https://i.stack.imgur.com/cQgKv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cQgKv.png" alt="enter image description here" /></a></p>