title: How to use transitions on select option using Vue.js
body: <p>I have quick question regarding transitions with Vue.js.</p>
  
  <p>In my boostrap template I'm trying to add one more select option dropdown based on selected option. So, I added change event on first select option. So, if I select <em>'first item'</em> then change classes and add dropdown in row, or else hides it.</p>
  
  <blockquote>
    <p><strong>Something like this:</strong></p>
  
  <pre><code>selectTodo: function(e) {
    let selectValue = e.target.options[e.target.selectedIndex].text
  
    if (selectValue === 'Learn Vue') {
      this.styleObject.display = 'unset';
      this.col_md = 'form-group col-md-4';
      this.showCropStageList = true;
    }
    else {
      this.showCropStageList = false;
      this.styleObject.display = 'none';
      this.col_md = 'form-group col-md-6';
      this.cropStageList = null;
    }
  }
  </code></pre>
  </blockquote>
  
  <p>I managed to do that but I want <em>more</em> smoother transitions on the first two dropdowns.</p>
  
  <p>I've managed to set up some <a href="https://jsfiddle.net/Loque/akt0su98/" rel="nofollow noreferrer">fiddle</a> where you can see smooth slide transition for third select dropdown but if if I change select from <em>"Learn Vue"</em> to something else, the third dropdown hides it but without any animation as well. </p>
  
  <p>You can see it in the snippet below, too!</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-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data: {
      todos: [
        { id:1 ,text: "Learn JavaScript", done: false },
        { id:2 ,text: "Learn Vue", done: false },
        { id:3 ,text: "Play around in JSFiddle", done: true },
        { id:4 ,text: "Build something awesome", done: true }
      ],
      col_md: 'form-group col-md-6',
      styleObject: {
            display: 'none'
          },
      showCropStageList: false,
    },
    methods: {
     toggle: function(todo){
       todo.done = !todo.done
      },
      selectTodo: function(e) {
      let selectValue = e.target.options[e.target.selectedIndex].text
      
          if (selectValue === 'Learn JavaScript') {
            
            this.styleObject.display = 'unset';
            this.col_md = 'form-group col-md-4';
            this.showCropStageList = true;
          }
          else {
  
            this.showCropStageList = false;
            this.styleObject.display = 'none';
            this.col_md = 'form-group col-md-6';
            this.cropStageList = null;
            
          }
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  
  .fade-enter {
    opacity: 0;
  }
  
  .fade-enter-active {
    transition: opacity 1s;
  }
  
  .fade-leave {}
  
  .fade-leave-active {
    transition: opacity 1s;
    opacity: 0;
  }
  
  #app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
  }
  
  li {
    margin: 8px 0;
  }
  
  h2 {
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  del {
    color: rgba(0, 0, 0, 0.3);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;!-- Content here --&gt;
    &lt;div id="app"&gt;
      &lt;div class="form-row"&gt;
        &lt;transition name="fade" appear&gt;
          &lt;div v-bind:class=col_md&gt;
            &lt;label for="cropType" class="col-form-label-sm font-weight-bold"&gt;Select Learn Javascript &lt;/label&gt;
            &lt;select class="form-control" v-on:change="selectTodo" id="cropType" v-model="pickedCropType" @change="getCropsByType()"&gt;
                &lt;option v-for="(todo, index) in todos" :key="index" :value="todo.id" &gt;
                  {{todo.text}}
                &lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
        &lt;/transition&gt;
        &lt;div v-bind:class=col_md&gt;
          &lt;label for="cropCulture" class="col-form-label-sm font-weight-bold"&gt;2. Second&lt;/label&gt;
          &lt;select class="form-control" id="cropCulture"&gt;
       &lt;option v-for="(todo, index) in todos" :key="index" :value="todo.id" &gt;
                  {{todo.text}}
                &lt;/option&gt;
              &lt;/select&gt;
        &lt;/div&gt;
        &lt;transition 
        enter-active-class="animated fadeInLeft"
        leave-active-class="animated fadeOutLeft"
        &gt;
          &lt;div class="form-group col-md-4" v-if="showCropStageList" v-bind:class="{styleObject }"&gt;
            &lt;label for="cropStage" class="col-form-label-sm font-weight-bold"&gt;3. Third&lt;/label&gt;
            &lt;select class="form-control" id="cropStage"&gt;
                  &lt;option v-for="(todo, index) in todos" :key="index" :value="todo.id" &gt;
                  {{todo.text}}
                &lt;/option&gt;
                &lt;/select&gt;
          &lt;/div&gt;
        &lt;/transition&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see change class for first two dropdowns but without any transitions. So, is it possible to add some transitions for first two dropdowns?</p>
  
  <p><strong>EDIT :</strong></p>
  
  <hr>
  
  <p><em>As you can see I'm changing class from *form-group col-md-6* to *form-group col-md-4*  and I' wondering if is it possible that that tranisition from md-6 to md-4 can be a bit smoother.</em></p>
  
  <p><a href="https://jsfiddle.net/Loque/akt0su98/" rel="nofollow noreferrer">https://jsfiddle.net/Loque/akt0su98/</a></p>