simplify css for transtion example

Author: David-Desmaisons

examples/Transition_example_2.html

@@ -16,8 +16,8 @@
   <div id="main">
     <div class="container-fluid machine-contents">
       <draggable :list="jobs" :options="{animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
-        <transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
-          <div v-for="(job, index) in jobs" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
+        <transition-group :name="!drag? 'list-complete' : null" :css="true">
+          <div v-for="(job, index) in jobs" :key="job.jobNumber" class="list-complete-item">
             <div>
               {{ job.jobNumber }}
             </div>

examples/Transition_example_3.html

@@ -18,8 +18,8 @@
       <div id="columns">
         <div class="container-fluid machine-contents list">
           <draggable :list="jobs" :options="{group:'a', animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
-            <transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
-              <div v-for="(job, index) in jobs" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
+            <transition-group :name="!drag? 'list-complete' : null" :css="true">
+              <div v-for="(job, index) in jobs" :key="job.jobNumber" class="list-complete-item">
                 <div>
                   {{ job.jobNumber }}
                 </div>
@@ -34,8 +34,8 @@
 
         <div class="container-fluid machine-contents list">
           <draggable v-model="jobs2" :options="{group:'a', animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
-            <transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
-              <div v-for="(job, index) in jobs2" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
+            <transition-group :name="!drag? 'list-complete' : null" :css="true">
+              <div v-for="(job, index) in jobs2" :key="job.jobNumber" class="list-complete-item">
                 <div>
                   {{ job.jobNumber }}
                 </div>

examples/css/main.css

@@ -36,24 +36,26 @@
   padding: 4px;
   margin-top: 4px;
   border: solid 1px;
-  transition: all 1s;
   height: 60px;
+}
+
+.list-complete-enter-active {
   overflow: hidden;
+  transition: all 1s;
 }
 
-.item {
-  padding: 4px;
-  margin-top: 4px;
-  border: solid 1px;
-  height: 60px;
+.list-complete-leave-active {
+  margin-top: 0px;
+  overflow: hidden;
+  transition: all 1s;
 }
 
-.list-complete-enter, .list-complete-leave-active {
-  opacity: 0;
+.list-complete-enter, .list-complete-leave-to {
   height: 0px;
-  margin-top: 0px;
+  opacity: 0;
   padding: 0px;
-  border: solid 0px;
+  margin-top: 0px;
+  overflow: hidden;
 }
 
 .machine-contents {