fix: no component fade-in, closes #500

Author: Akryum

docs-src/App.vue

@@ -258,15 +258,15 @@ label input {
     visibility: hidden;
     opacity: 0;
     &:not(.no-transition) {
-      transition: opacity .15s, visibility .15s;
+      transition: opacity .5s, visibility .5s;
     }
   }
 
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
     &:not(.no-transition) {
-      transition: opacity .15s;
+      transition: opacity .5s;
     }
   }
 

docs-src/PopoverHover.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-popover
+    trigger="hover"
+    offset="16"
+    :auto-hide="false"
+  >
+    <button class="tooltip-target b1 popover-btn">Target</button>
+
+    <template slot="popover">
+      Hello
+    </template>
+  </v-popover>
+</template>

docs-src/main.js

@@ -4,7 +4,6 @@ import VTooltip, { createTooltip, destroyTooltip } from '../'
 import App from './App.vue'
 import PageHome from './PageHome.vue'
 import PageInstall from './PageInstall.vue'
-const PageTable = () => import('./PageTable.vue')
 
 Vue.use(VTooltip, {
   disposeTimeout: 5000,
@@ -30,7 +29,8 @@ const router = new VueRouter({
   routes: [
     { path: '/', name: 'home', component: PageHome },
     { path: '/install', name: 'install', component: PageInstall },
-    { path: '/table', name: 'table', component: PageTable },
+    { path: '/table', name: 'table', component: () => import('./PageTable.vue') },
+    { path: '/popover-hover', name: 'popover-hover', component: () => import('./PopoverHover.vue') },
     { path: '*', redirect: '/' },
   ],
 })

src/components/Popover.vue

@@ -347,6 +347,14 @@ export default {
         }
         container.appendChild(popoverNode)
         this.$_mounted = true
+        this.isOpen = false
+        if (this.popperInstance) {
+          requestAnimationFrame(() => {
+            if (!this.hidden) {
+              this.isOpen = true
+            }
+          })
+        }
       }
 
       if (!this.popperInstance) {