How to use transitions on select option using Vue.js

I have quick question regarding transitions with Vue.js.

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 'first item' then change classes and add dropdown in row, or else hides it.

Something like this:

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;
  }
}

I managed to do that but I want more smoother transitions on the first two dropdowns.

I've managed to set up some fiddle where you can see smooth slide transition for third select dropdown but if if I change select from "Learn Vue" to something else, the third dropdown hides it but without any animation as well.

You can see it in the snippet below, too!

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;
          
        }
    }
  }
})

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);
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="container">
  <!-- Content here -->
  <div id="app">
    <div class="form-row">
      <transition name="fade" appear>
        <div v-bind:class=col_md>
          <label for="cropType" class="col-form-label-sm font-weight-bold">Select Learn Javascript </label>
          <select class="form-control" v-on:change="selectTodo" id="cropType" v-model="pickedCropType" @change="getCropsByType()">
              <option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
                
              </option>
            </select>
        </div>
      </transition>
      <div v-bind:class=col_md>
        <label for="cropCulture" class="col-form-label-sm font-weight-bold">2. Second</label>
        <select class="form-control" id="cropCulture">
     <option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
                
              </option>
            </select>
      </div>
      <transition 
      enter-active-class="animated fadeInLeft"
      leave-active-class="animated fadeOutLeft"
      >
        <div class="form-group col-md-4" v-if="showCropStageList" v-bind:class="{styleObject }">
          <label for="cropStage" class="col-form-label-sm font-weight-bold">3. Third</label>
          <select class="form-control" id="cropStage">
                <option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
                
              </option>
              </select>
        </div>
      </transition>
    </div>
  </div>
</div>

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?

EDIT :

---

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.

https://jsfiddle.net/Loque/akt0su98/

from How to use transitions on select option using Vue.js