Add show class when visible.

charkins · charkins · commit d49476996f22 · 2017-04-18T14:36:56.000-05:00
When the show class is added in the after-enter handler of the vue transition group it gets lost if an update is made asynchronously in the modal shown handler: https://jsfiddle.net/bw7socb3/
diff --git a/lib/components/modal.vue b/lib/components/modal.vue
@@ -1,16 +1,15 @@
 <template>
     <div>
         <transition-group enter-class="hidden"
-                          enter-to-class="show"
+                          enter-to-class=""
                           enter-active-class=""
                           leave-class="show"
                           leave-active-class=""
                           leave-to-class="hidden"
-                          v-on:after-enter="afterEnter"
         >
             <div key="modal" :id="id"
                  v-show="visible"
-                 :class="['modal',{fade :fade}]"
+                 :class="['modal',{fade :fade, show :visible}]"
                  @click="onClickOut($event)"
             >
 
@@ -44,7 +43,7 @@
             </div>
 
             <div key="modal-backdrop"
-                 :class="['modal-backdrop',{fade: fade}]"
+                 :class="['modal-backdrop',{fade: fade, show :visible}]"
                  v-if="visible"
             ></div>
         </transition-group>
@@ -174,11 +173,6 @@
                 if (key === 27) { // 27 is esc
                     this.hide();
                 }
-            },
-            afterEnter(el) {
-                // Add show class to keep el showed just after transition is ended,
-                // Because transition removes all used classes
-                el.classList.add('show');
             }
         },
         created() {
