feat: improve v-show to support <transition>

rigor789 · rigor789 · commit 3e50a90a2f7f · 2018-06-21T16:52:54.000+02:00
diff --git a/platform/nativescript/runtime/directives/show.js b/platform/nativescript/runtime/directives/show.js
@@ -1,12 +1,57 @@
-function show(el, show) {
-  el.setAttribute('visibility', show ? 'visible' : 'collapsed')
+import { enter, leave } from '../modules/transition'
+
+// recursively search for possible transition defined inside the component root
+function locateNode(vnode) {
+  return vnode.componentInstance && (!vnode.data || !vnode.data.transition)
+    ? locateNode(vnode.componentInstance._vnode)
+    : vnode
 }
 
 export default {
-  inserted(el, { value }) {
-    show(el, value)
+  bind(el, { value }, vnode) {
+    vnode = locateNode(vnode)
+    const transition = vnode.data && vnode.data.transition
+    const originalVisibility = (el.__vOriginalVisibility =
+      el.getAttribute('visibility') === 'none'
+        ? ''
+        : el.getAttribute('visibility'))
+    if (value && transition) {
+      vnode.data.show = true
+      enter(vnode, () => {
+        el.setAttribute('visibility', originalVisibility)
+      })
+    } else {
+      el.setAttribute('visibility', value ? originalVisibility : 'collapsed')
+    }
+  },
+
+  update(el, { value, oldValue }, vnode) {
+    /* istanbul ignore if */
+    if (!value === !oldValue) return
+    vnode = locateNode(vnode)
+    const transition = vnode.data && vnode.data.transition
+    if (transition) {
+      vnode.data.show = true
+      if (value) {
+        enter(vnode, () => {
+          el.setAttribute('visibility', el.__vOriginalVisibility)
+        })
+      } else {
+        leave(vnode, () => {
+          el.setAttribute('visibility', 'collapsed')
+        })
+      }
+    } else {
+      el.setAttribute(
+        'visibility',
+        value ? el.__vOriginalVisibility : 'collapsed'
+      )
+    }
   },
-  update(el, { value }) {
-    show(el, value)
+
+  unbind(el, binding, vnode, oldVnode, isDestroy) {
+    if (!isDestroy) {
+      el.setAttribute('visibility', el.__vOriginalVisibility)
+    }
   }
 }
