优化RightToolbar搜索栏切换动画

ruoyi-ui/src/components/RightToolbar/index.vue

@@ -123,7 +123,34 @@ export default {
   methods: {
     // 搜索
     toggleSearch() {
-      this.$emit("update:showSearch", !this.showSearch)
+      let el = this.$el
+      let formEl = null
+      while ((el = el.parentElement) && el !== document.body) {
+        if ((formEl = el.querySelector('.el-form'))) break
+      }
+      if (!formEl) return this.$emit('update:showSearch', !this.showSearch)
+      this._animateSearch(formEl, this.showSearch)
+    },
+    // 搜索栏动画
+    _animateSearch(el, isHide) {
+      const DURATION = 260
+      const TRANSITION = 'max-height 0.25s ease, opacity 0.2s ease'
+      const clear = () => Object.assign(el.style, { transition: '', maxHeight: '', opacity: '', overflow: '' })
+      Object.assign(el.style, { overflow: 'hidden', transition: '' })
+      if (isHide) {
+        Object.assign(el.style, { maxHeight: el.scrollHeight + 'px', opacity: '1', transition: TRANSITION })
+        requestAnimationFrame(() => Object.assign(el.style, { maxHeight: '0', opacity: '0' }))
+        setTimeout(() => { this.$emit('update:showSearch', false); clear() }, DURATION)
+      } else {
+        this.$emit('update:showSearch', true)
+        this.$nextTick(() => {
+          Object.assign(el.style, { maxHeight: '0', opacity: '0' })
+          requestAnimationFrame(() => requestAnimationFrame(() => {
+            Object.assign(el.style, { transition: TRANSITION, maxHeight: el.scrollHeight + 'px', opacity: '1' })
+          }))
+          setTimeout(clear, DURATION)
+        })
+      }
     },
     // 刷新
     refresh() {