update: [Tooltip] receive updates

components/style/mixins/motion.less

@@ -20,11 +20,22 @@
     .motion-common-leave(@duration);
     animation-play-state: paused;
   }
+  .@{className}-enter-active,
+  .@{className}-appear-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+    .motion-common(@duration);
+  }
   .@{className}-enter.@{className}-enter-active,
   .@{className}-appear.@{className}-appear-active {
     animation-name: ~"@{keyframeName}In";
     animation-play-state: running;
   }
+  .@{className}-leave-active {
+    animation-name: ~"@{keyframeName}Out";
+    animation-play-state: running;
+    .motion-common(@duration);
+  }
   .@{className}-leave.@{className}-leave-active {
     animation-name: ~"@{keyframeName}Out";
     animation-play-state: running;

components/tooltip/style/index.less

@@ -145,63 +145,3 @@
     right: 16px;
   }
 }
-
-
-/**
-modified part ,remove these if needed
- */
-
-.vc-fade-enter-active, .vc-fade-leave-active {
-  transition: all 3s;
-}
-.vc-fade-enter, .vc-fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
-  opacity: 0;
-}
-
-.box {
-  background: red;
-  width: 100px;
-  height: 100px;
-}
-.fade-enter {
-  opacity: 0;
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  animation-play-state: paused;
-}
-
-.fade-leave {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  animation-play-state: paused;
-}
-
-.fade-enter.fade-enter-active {
-  animation-name: rcDialogFadeIn;
-  animation-play-state: running;
-}
-
-.fade-leave.fade-leave-active {
-  animation-name: rcDialogFadeOut;
-  animation-play-state: running;
-}
-
-@keyframes rcDialogFadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes rcDialogFadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}

components/tooltip/tooltip.vue

@@ -1,13 +1,9 @@
 <script>
 import Vue from 'vue'
-import AntTransition from '../../utils/ant-transition.vue'
-
-Vue.component('ant-transition', AntTransition)
-
 export default {
   name: 'ToolTip',
   props: {
-    title: [String, Vue.Component],
+    title: String,
     prefixCls: {
       default: 'ant-tooltip',
     },
@@ -37,6 +33,7 @@ export default {
       visible: false,
       left: 0,
       top: 0,
+      domNode: null,
     }
   },
   computed: {
@@ -60,10 +57,10 @@ export default {
       },
       render(h) {
         return (
-          <ant-transition name="fade">
+          <transition name="zoom-big">
             <div
               v-show={that.visible}
-              class={`ant-tooltip ant-tooltip-placement-${that.placement} ${that.visible ? '' : 'ant-tooltip-hidden'}`}
+              class={`ant-tooltip ant-tooltip-placement-${that.placement}`}
               style={{ left: this.left + 'px', top: this.top + 'px' }}
             >
               <div class="ant-tooltip-content">
@@ -73,12 +70,13 @@ export default {
                 </div>
               </div>
             </div>
-          </ant-transition>
+          </transition>
         )
       }
     }).$mount(div)
     this.$nextTick(() => {
       this.vnode = vnode
+      this.domNode = div
     })
   },
   methods: {
@@ -164,16 +162,17 @@ export default {
 //    console.info(inner)
     return this.$slots.default[0]
   },
-  mounted() {
+  updated() {
-    this.$nextTick(() => {
+    const popup = this.vnode.$el.getBoundingClientRect()
-    })
+    const content = this.$el.getBoundingClientRect()
+    const { left, top } = this.computeOffset(popup, content, this.placement)
+    this.vnode.left = left
+    this.vnode.top = top
   },
   beforeDestory() {
-    console.info('没有成功清除实例，看vue panel')
+    console.info('没有成功清除实例 ，看vue panel')
     this.vnode.$destroy();
-  },
+    this.domNode && this.domNode.remove()
-  components: {
-    'ant-transition': AntTransition
   }
 }
 </script>

components/util/util.js

@@ -1,40 +1,39 @@
-function getScroll(w, top) {
+function getScroll (w, top) {
-  let ret = top ? w.pageYOffset : w.pageXOffset;
+  let ret = top ? w.pageYOffset : w.pageXOffset
-  const method = top ? 'scrollTop' : 'scrollLeft';
+  const method = top ? 'scrollTop' : 'scrollLeft'
   if (typeof ret !== 'number') {
-    const d = w.document;
+    const d = w.document
     // ie6,7,8 standard mode
-    ret = d.documentElement[method];
+    ret = d.documentElement[method]
     if (typeof ret !== 'number') {
       // quirks mode
-      ret = d.body[method];
+      ret = d.body[method]
     }
   }
-  return ret;
+  return ret
 }
 
-function getClientPosition(elem) {
+function getClientPosition (elem) {
-  let box;
+  let x
-  let x;
+  let y
-  let y;
+  const doc = elem.ownerDocument
-  const doc = elem.ownerDocument;
+  const body = doc.body
-  const body = doc.body;
+  const docElem = doc && doc.documentElement
-  const docElem = doc && doc.documentElement;
+  const box = elem.getBoundingClientRect()
-  box = elem.getBoundingClientRect();
+  x = box.left
-  x = box.left;
+  y = box.top
-  y = box.top;
+  x -= docElem.clientLeft || body.clientLeft || 0
-  x -= docElem.clientLeft || body.clientLeft || 0;
+  y -= docElem.clientTop || body.clientTop || 0
-  y -= docElem.clientTop || body.clientTop || 0;
   return {
     left: x,
     top: y,
-  };
+  }
 }
 
 export const getOffsetLeft = (el) => {
-  const pos = getClientPosition(el);
+  const pos = getClientPosition(el)
-  const doc = el.ownerDocument;
+  const doc = el.ownerDocument
-  const w = doc.defaultView || doc.parentWindow;
+  const w = doc.defaultView || doc.parentWindow
-  pos.left += getScroll(w);
+  pos.left += getScroll(w)
-  return pos.left;
+  return pos.left
 }

examples/tooltip.vue

@@ -1,9 +1,11 @@
 <template>
-  <tool-tip
+  <div>
-    placement="top"
+    <tool-tip
-    title="nihaoaaaaaaaaaaaaaaaaaaaaa">
+      placement="top"
-    <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
+      :title="showText">
-  </tool-tip>
+      <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
+    </tool-tip>
+  </div>
 </template>
 
 <script>
@@ -11,11 +13,14 @@
 	export default {
 		name: '',
 		data() {
-			return {}
+			return {
+        show: true,
+        showText: '你好啊，23'
+      }
 		},
     methods: {
 		  boom() {
-		    console.info(23333)
+		    this.showText += '3'
       }
     },
     components: {
@@ -23,7 +28,3 @@
     }
 	}
 </script>
-
-<style scoped>
-
-</style>

utils/ant-transition.vue

@@ -1,32 +0,0 @@
-<template>
-  <transition
-    :name="name"
-    :enter-to-class="enterTo"
-    :enter-active-class="enterActive"
-    :leave-to-class="leaveTo"
-  >
-    <slot></slot>
-  </transition>
-</template>
-
-<script>
-	export default {
-		name: 'ant-transition',
-    props: {
-		  name: {
-		    required: true,
-      }
-    },
-    computed: {
-      enterTo() {
-        return this.name + '-enter'
-      },
-      enterActive() {
-        return `${this.name}-enter ${this.name}-enter-active`
-      },
-      leaveTo() {
-        return this.name + '-leave'
-      }
-    }
-	}
-</script>