feat(drawer): add showAnimation prop

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

@@ -42,17 +42,15 @@ export default defineComponent({
 
  render() {
  const {
- zindex, slots, isCover, navRight, navWidth, 
+ zindex, slots, isCover, navRight, navWidth,
  visible, handleDrawerClose, destroyOnHide } = this
 
  if (destroyOnHide.value && !visible) {
  return null
  }
 
- const visibleVal = visible ? 'visible' : 'hidden'
-
  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 }}>

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

@@ -14,7 +14,9 @@ function createDrawerApp(props: DrawerProps, drawer: drawerInstance, el: HTMLEle
  return drawer
  }
  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']} {...props}>{{ header: props.header, content: props.content }}</DDrawer>
  )
  res.mount(el)
  return res

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

@@ -33,6 +33,10 @@ export const drawerProps = {
  type: Boolean,
  default: false,
  },
+ showAnimation: { // 是否启用动效
+ type: Boolean,
+ default: true,
+ },
  beforeHidden: { // 关闭前的回调
  type: [Promise, Function] as PropType<Promise<boolean> | (() => boolean | Promise<boolean>)>,
  },

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

@@ -1,15 +1,17 @@
-import { defineComponent, ref, toRefs, watch, onUnmounted, Teleport, provide } from 'vue'
-import { drawerProps, DrawerProps } from './drawer-types'
+import { defineComponent, ref, toRefs, watch, onUnmounted, Teleport, provide, Transition } from 'vue'
+import { drawerProps } from './drawer-types'
 
 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,
+ props: drawerProps as any,
  emits: ['close', 'update:visible', 'afterOpened'],
- setup(props: DrawerProps, { emit, slots }) {
+ setup(props, { emit, slots }) {
  const {
  width, visible, zIndex, isCover, escKeyCloseable, position,
  backdropCloseable, destroyOnHide
@@ -80,21 +82,24 @@ export default defineComponent({
  }
  },
  render() {
- const { fullscreen, closeDrawer, visible, destroyOnHide } = this;
+ const { fullscreen, closeDrawer, visible, destroyOnHide, showAnimation, position } = this;
+
+ const transitionName = showAnimation ? position : 'none'
+
  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}) : 
- <DrawerHeader onToggleFullScreen={fullscreen} onClose={closeDrawer} />
- }
- {this.slots.content ? this.slots.content() : <DrawerContainer />}
- </DrawerBody>
+ <Transition name={'devui-drawer-' + transitionName}>
+ <DrawerBody v-show={ visible }>
+ {this.slots.header ? this.slots.header({fullscreen, closeDrawer}) :
+ <DrawerHeader onToggleFullScreen={fullscreen} onClose={closeDrawer} />
+ }
+ {this.slots.content ? this.slots.content() : <DrawerContainer />}
+ </DrawerBody>
+ </Transition>
  </Teleport>
  )
  }