diff --git a/components/checkbox/checkbox.vue b/components/checkbox/Checkbox.vue
similarity index 100%
rename from components/checkbox/checkbox.vue
rename to components/checkbox/Checkbox.vue
diff --git a/components/style/mixins/motion.less b/components/style/mixins/motion.less
index 84b2c82eb..411143c7f 100644
--- a/components/style/mixins/motion.less
+++ b/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;
diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
index a5377f0d3..dae1ed5bb 100644
--- a/components/tooltip/style/index.less
+++ b/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;
- }
-}
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index 2ca384638..33912bae6 100644
--- a/components/tooltip/tooltip.vue
+++ b/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() {
- this.$nextTick(() => {
- })
+ updated() {
+ 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();
- },
- components: {
- 'ant-transition': AntTransition
+ this.domNode && this.domNode.remove()
}
}
</script>
diff --git a/examples/tooltip.vue b/examples/tooltip.vue
index 7b18f08b0..651957dbd 100644
--- a/examples/tooltip.vue
+++ b/examples/tooltip.vue
@@ -1,9 +1,11 @@
<template>
- <tool-tip
- placement="top"
- title="nihaoaaaaaaaaaaaaaaaaaaaaa">
- <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
- </tool-tip>
+ <div>
+ <tool-tip
+ placement="top"
+ :title="showText">
+ <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>
diff --git a/utils/ant-transition.vue b/utils/ant-transition.vue
deleted file mode 100644
index e87ff117c..000000000
--- a/utils/ant-transition.vue
+++ /dev/null
@@ -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>