🐛 搜索面板切换动画

Former-commit-id: 202d8768936a66de9cbcb294fa21799c93766fc9 [formerly 202d8768936a66de9cbcb294fa21799c93766fc9 [formerly 202d8768936a66de9cbcb294fa21799c93766fc9 [formerly 202d8768936a66de9cbcb294fa21799c93766fc9 [formerly 81a07d5faa4735944626e3a8709a92bb7a981b96 [formerly e9d65f3a3700eca52464fc55998c68db6f2ac03b]]]]]
Former-commit-id: 8c8d58c104f0402fc377c09b193341a283be9713
Former-commit-id: dc87177a3fde2a11e29d0908802adedc8969c6a6
Former-commit-id: a5cafbc4e3ecf2c8573d68cff8566ca5a39e0488 [formerly c801ca0eba574dd09f6be584b57de13aa5417828]
Former-commit-id: f80eb720264d6274bbfcae47749c26cc1be61f0a
Former-commit-id: bfaf54f4593c40eed86b72f68a469299804b491f
Former-commit-id: bd4b6d36a0b4d2e79f374d641a89be4037e3153b
Former-commit-id: 8baeca4c2c02c1c2820d7c42dabffa05de0e5be0
Former-commit-id: 753ed36a6a192dbf53944197c174bb6f1232a684

src/assets/style/animate/vue-transition.scss

@@ -15,7 +15,7 @@
 // 过渡动画 缩放渐变
 .fade-scale-leave-active,
 .fade-scale-enter-active {
-  transition: all .5s;
+  transition: all .3s;
 }
 .fade-scale-enter {
   opacity: 0;

src/layout/header-aside/components/panel-search/index.vue

@@ -122,7 +122,9 @@ export default {
     focus () {
       this.input = ''
       setTimeout(() => {
-        this.$refs.input.focus()
+        if (this.$refs.input) {
+          this.$refs.input.focus()
+        }
         // 还原
         this.searchText = ''
         this.results = []

src/layout/header-aside/layout.vue

@@ -51,7 +51,7 @@
         <div class="d2-theme-container-main" flex-box="1" flex>
           <!-- 搜索 -->
           <transition name="fade-scale">
-            <div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+            <div v-if="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
               <d2-panel-search
                 ref="panelSearch"
                 @close="searchPanelClose"/>
@@ -59,7 +59,7 @@
           </transition>
           <!-- 内容 -->
           <transition name="fade-scale">
-            <div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+            <div v-if="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
               <!-- tab -->
               <div class="d2-theme-container-main-header" flex-box="0">
                 <d2-tabs/>

src/layout/header-aside/mixins/search.js

@@ -39,13 +39,21 @@ export default {
     handleSearchClick () {
       this.searchToggle()
       if (this.searchActive) {
-        this.$refs.panelSearch.focus()
+        setTimeout(() => {
+          if (this.$refs.panelSearch) {
+            this.$refs.panelSearch.focus()
+          }
+        }, 500)
       }
     },
     searchPanelOpen () {
       if (!this.searchActive) {
         this.searchSet(true)
-        this.$refs.panelSearch.focus()
+        setTimeout(() => {
+          if (this.$refs.panelSearch) {
+            this.$refs.panelSearch.focus()
+          }
+        }, 500)
       }
     },
     // 关闭搜索面板