title: Vuejs list reorder doesn't trigger transitions
body: <p>I've been doing some vuejs for almost a year now and I never really got animations and transitions to work, it seems very unclear to me how all this is supposed to work and today I decided to try and finally understand them but once again I am stuck, the transition simply won't work and I don't understand what I'm doing wrong.
  Here is my code:</p>
  <p>The HTML</p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
   &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;transition-group name=&quot;flip-list&quot; tag=&quot;div&quot; class=&quot;row horizontal-scroll&quot;&gt;
            &lt;div class=&quot;col-xs-12 col-md-2 col-lg-2 col-card&quot; 
              v-for=&quot;(someCard, index) in someCards&quot; v-bind:key=&quot;index&quot;&gt;
              &lt;div class=&quot;some-card&quot; @click=&quot;changeOrder(someCard)&quot;&gt;
                {{ someCard.someTitle }}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/transition-group&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The JS</p>
  <pre><code>new Vue({
    el: &quot;#app&quot;,
    data: {
      someCards: [
            {
              order: 2,
              someTitle: 'Title 1'
            },
            {
              order: 2,
              someTitle: 'Title 2'
            },
            {
              order: 2,
              someTitle: 'Title 3'
            },
            {
              order: 3,
              someTitle: 'Title 4'
            },
            {
              order: 3,
              someTitle: 'Title 5'
            },
            {
              order: 1,
              someTitle: 'Title 6'
            },
            {
              order: 1,
              someTitle: 'Title 7'
            },
            {
              order: 1,
              someTitle: 'Title 8'
            },
            {
              order: 3,
              someTitle: 'Title 1'
            }
          ]
    },
    methods: {
      changeOrder(someCardData) {
          let newRandom = Math.floor(Math.random() * 3) + 1;
          while (newRandom === someCardData.order) {
            newRandom = Math.floor(Math.random() * 3) + 1;
          }
          someCardData.order = newRandom;
          this.reorderList();
        },
        reorderList() {
          this.someCards.sort(function(objA, objB) {
            return objA.order - objB.order;
          })
        },
    }
  })
  </code></pre>
  <p>The CSS</p>
  <pre><code>/* default */
  body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  #app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
  }
  /* bootstrap */
  .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
      position: relative;
      width: 100%;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
  }
  
  /* my css */
  .horizontal-scroll {
    overflow-x: auto;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .col-card {
    max-width: 14%;
  }
  .some-card {
    height: 220px;
    font-size: 16px;
    text-align: center;
    padding-right: 5px;
    margin-top: 5px;
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.1);
    box-shadow: 1px 1px 5px rgba(0,0,0,.1);
    border-radius: 2px;
    background: #fff;
    margin-bottom: 20px;
    position: relative;
    border-top-style: solid;
  }
  .flip-list-move {
    transition: transform 1s;
  }
  </code></pre>
  <p><a href="https://jsfiddle.net/eywraw8t/459088/" rel="nofollow noreferrer">https://jsfiddle.net/eywraw8t/459088/</a></p>
  <p>I am trying to have an animation triggered when I reorder a card in a list of cards aligned in a row. To change the position of a card, simply click on it. The reorder works but no transition is done.</p>
  <p>I used this documentation
  <a href="https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions</a>
  and have seen a couple of fairly easy tutorials but I must be missing something. Can someone please check the code out and tell me what it is ?</p>
  <p>Thanks</p>