feat(drawer): add showAnimation prop

packages/devui-vue/devui/drawer/src/components/drawer-body.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, computed } from 'vue'
+import { defineComponent, inject, computed, Transition } from 'vue'
 
 import './drawer-body.scss'
 
@@ -14,6 +14,7 @@ export default defineComponent({
     const visible: boolean = inject('visible')
     const backdropCloseable: any = inject('backdropCloseable')
     const destroyOnHide: any = inject('destroyOnHide')
+    const showAnimation: any = inject('showAnimation')
 
     const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : { 'left': 0 })
     const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value)
@@ -34,6 +35,8 @@ export default defineComponent({
       navRight,
       navWidth,
       visible,
+      position,
+      showAnimation,
       clickContent,
       handleDrawerClose,
       destroyOnHide,
@@ -42,25 +45,27 @@ export default defineComponent({
 
   render() {
     const {
-      zindex, slots, isCover, navRight, navWidth, 
-      visible, handleDrawerClose, destroyOnHide } = this
+      zindex, slots, isCover, navRight, navWidth, showAnimation,
+      visible, handleDrawerClose, destroyOnHide, position } = this
 
     if (destroyOnHide.value && !visible) {
       return null
     }
 
-    const visibleVal = visible ? 'visible' : 'hidden'
+    const transitionName = showAnimation ? position : 'none'
 
     return (
-      <div class="devui-drawer" style={{ zIndex: zindex, visibility : visibleVal }} onClick={handleDrawerClose} >
+      <div class="devui-drawer" style={{ zIndex: zindex }} onClick={handleDrawerClose} >
         {isCover ? <div class="devui-overlay-backdrop" /> : null}
-        <div class="devui-overlay-wrapper">
-          <div class="devui-drawer-nav" style={{ 'width': navWidth, ...navRight }}>
-            <div class="devui-drawer-content" onClick={this.clickContent}>
-              {slots.default ? slots.default() : null}
+        <Transition name={'devui-drawer-' + transitionName}>
+          <div class="devui-overlay-wrapper" v-show={ visible }>
+            <div class="devui-drawer-nav" style={{ 'width': navWidth, ...navRight }}>
+              <div class="devui-drawer-content" onClick={this.clickContent}>
+                {slots.default ? slots.default() : null}
+              </div>
             </div>
           </div>
-        </div>
+        </Transition>
       </div>
     )
   }

packages/devui-vue/devui/drawer/src/components/drawer-container.tsx

@@ -13,7 +13,6 @@ export default defineComponent({
     if (destroyOnHide.value && !visible) {
       return null
     }
-    const visibleVal = this.visible ? 'visible' : 'hidden'
-    return <div style={{ visibility : visibleVal }}>内容区域</div>
+    return <div>内容区域</div>
   }
 })

packages/devui-vue/devui/drawer/src/components/drawer-header.tsx

@@ -26,19 +26,17 @@ export default defineComponent({
     return { fullScreenClassName, visible, handleFullScreen, handleDrawerClose, destroyOnHide }
   },
   render() {
-    const { 
-      handleFullScreen, handleDrawerClose, visible, 
-      fullScreenClassName, destroyOnHide 
+    const {
+      handleFullScreen, handleDrawerClose, visible,
+      fullScreenClassName, destroyOnHide
     } = this
 
     if (destroyOnHide.value && !visible) {
       return null
     }
 
-    const visibleVal = visible ? 'visible' : 'hidden'
-
     return (
-      <div class="devui-drawer-header" style= {{ visibility : visibleVal }}>
+      <div class="devui-drawer-header">
         <div class="devui-drawer-header-item">
           <span class="devui-drawer-header-item icon icon-more-operate" />
         </div>

packages/devui-vue/devui/drawer/src/drawer-service.tsx

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { DrawerProps } from './drawer-types'
 
 import DDrawer from './drawer'
+import {  omit } from 'lodash-es'
 
 interface drawerInstance {
   hide(): void
@@ -13,8 +14,12 @@ function createDrawerApp(props: DrawerProps, drawer: drawerInstance, el: HTMLEle
   if (drawer) {
     return drawer
   }
+  const restProps = omit(props, ['header', 'content', 'visible'])
+
   const res = createApp(
-    <DDrawer v-model:visible={props.visible}>{{ header: props.header, content: props.content }}</DDrawer>
+    // BUG: this function generates a new app, v-model instructor of template is like not working
+    // TODO: could be fixed by using self-defined header slot
+    <DDrawer v-model={[props.visible, 'visible']} {...restProps}>{{ header: props.header, content: props.content }}</DDrawer>
   )
   res.mount(el)
   return res

packages/devui-vue/devui/drawer/src/drawer-types.ts

@@ -33,14 +33,18 @@ export const drawerProps = {
     type: Boolean,
     default: false,
   },
+  showAnimation: { // 是否启用动效
+    type: Boolean,
+    default: true,
+  },
   beforeHidden: { // 关闭前的回调
     type: [Promise, Function] as PropType<Promise<boolean> | (() => boolean | Promise<boolean>)>,
   },
   content: { // 默认内容插槽
-    type: [Object, Function],
+    type: Object,
   },
   header: { // 头部内容插槽
-    type: [Object, Function],
+    type: Object,
   },
 } as const
 

packages/devui-vue/devui/drawer/src/drawer.scss

@@ -1 +1,41 @@
+.devui-drawer{
+  &-left-enter-active {
+    animation: left-inout 0.3s;
+  }
 
+  &-left-leave-active {
+    animation: left-inout 0.3s reverse;
+  }
+
+  &-right-enter-active {
+    animation: right-inout 0.3s;
+  }
+
+  &-right-leave-active {
+    animation: right-inout 0.3s reverse;
+  }
+}
+
+@keyframes right-inout {
+  0% {
+    transform: translateX(100px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes left-inout {
+  0% {
+    transform: translateX(-100px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

packages/devui-vue/devui/drawer/src/drawer.tsx

@@ -5,17 +5,19 @@ import DrawerHeader from './components/drawer-header'
 import DrawerContainer from './components/drawer-container'
 import DrawerBody from './components/drawer-body'
 
+import './drawer.scss'
+
 export default defineComponent({
   name: 'DDrawer',
   props: drawerProps,
   emits: ['close', 'update:visible', 'afterOpened'],
   setup(props: DrawerProps, { emit, slots }) {
     const {
       width, visible, zIndex, isCover, escKeyCloseable, position,
-      backdropCloseable, destroyOnHide
+      backdropCloseable, destroyOnHide, showAnimation
     } = toRefs(props)
     const isFullScreen = ref(false)
-    
+
     const fullscreen = () => {
       isFullScreen.value = !isFullScreen.value
     }
@@ -66,6 +68,7 @@ export default defineComponent({
     provide('isFullScreen', isFullScreen)
     provide('backdropCloseable', backdropCloseable)
     provide('destroyOnHide', destroyOnHide)
+    provide('showAnimation', showAnimation)
 
     onUnmounted(() => {
       document.removeEventListener('keyup', escCloseDrawer)
@@ -81,16 +84,15 @@ export default defineComponent({
   },
   render() {
     const { fullscreen, closeDrawer, visible, destroyOnHide } = this;
+
     if (destroyOnHide.value && !visible) {
       return null
     }
 
-    const visibleVal = visible ? 'visible' : 'hidden'
     return (
       <Teleport to="body">
-        <DrawerBody style= {{ visibility : visibleVal }}>
-          {/* BUG: 已使用作用域插槽解决 此处对应的 DEMO 使用了 **双向绑定** 导致可以关闭【一种关闭了的'假象'】。*/}
-          {this.slots.header ? this.slots.header({fullscreen, closeDrawer}) : 
+        <DrawerBody v-show={ visible }>
+          {this.slots.header ? this.slots.header({fullscreen, closeDrawer}) :
             <DrawerHeader onToggleFullScreen={fullscreen} onClose={closeDrawer} />
           }
           {this.slots.content ? this.slots.content() : <DrawerContainer />}