feat(Popover): add animation

src/popover/demo/index.vue

@@ -4,7 +4,7 @@
       <van-popover
         v-model="show.lightTheme"
         :actions="t('actions')"
-        placement="bottom"
+        placement="bottom-start"
         style="margin-left: 16px;"
       >
         <template #reference>
@@ -35,7 +35,7 @@
         name="picker"
         :value="currentPlacement"
         :label="t('choosePlacement')"
-        :placeholder="t('placeholder')"
+        :placeholder="t('choosePlacement')"
         @click="showPicker = true"
       />
 
@@ -55,7 +55,7 @@
 
       <div class="demo-popover-box">
         <van-popover
-          :value="true"
+          v-model="show.placement"
           :actions="t('shortActions')"
           :placement="currentPlacement"
         >
@@ -70,7 +70,7 @@
       <van-popover
         v-model="show.showIcon"
         :actions="t('actionsWithIcon')"
-        placement="top"
+        placement="top-start"
         style="margin-left: 16px;"
       >
         <template #reference>
@@ -157,7 +157,7 @@ export default {
         lightTheme: false,
       },
       showPicker: false,
-      currentPlacement: 'top',
+      currentPlacement: '',
       placements: [
         'top',
         'top-start',
@@ -179,6 +179,10 @@ export default {
     onConfirm(value) {
       this.showPicker = false;
       this.currentPlacement = value;
+
+      setTimeout(() => {
+        this.show.placement = true;
+      }, 300);
     },
   },
 };

src/popover/index.js

@@ -48,12 +48,6 @@ export default createComponent({
     },
   },
 
-  data() {
-    return {
-      location: null,
-    };
-  },
-
   watch: {
     placement: 'updateLocation',
 
@@ -86,6 +80,7 @@ export default createComponent({
             name: 'computeStyles',
             options: {
               adaptive: false,
+              gpuAcceleration: false,
             },
           },
           {
@@ -100,6 +95,10 @@ export default createComponent({
 
     updateLocation() {
       this.$nextTick(() => {
+        if (!this.value) {
+          return;
+        }
+
         if (!this.popper) {
           this.popper = this.createPopper();
         } else {
@@ -114,7 +113,7 @@ export default createComponent({
       const { icon, text, disabled, className } = action;
       return (
         <div
-          class={[bem('action', { disabled }), className]}
+          class={[bem('action', { disabled, 'with-icon': icon }), className]}
           onClick={() => this.onClickAction(action, index)}
         >
           {icon && <Icon name={icon} class={bem('action-icon')} />}
@@ -171,7 +170,6 @@ export default createComponent({
         <Popup
           ref="popover"
           value={this.value}
-          style={this.location}
           class={bem([this.theme])}
           overlay={this.overlay}
           position={null}

src/popover/index.less

@@ -5,7 +5,7 @@
   position: absolute;
   overflow: visible;
   border-radius: @border-radius-lg;
-  transition-duration: 0s;
+  transition: opacity 0.15s, transform 0.15s;
 
   &__wrapper {
     display: inline-block;
@@ -46,7 +46,14 @@
     }
 
     &-icon {
-      font-size: 16px;
+      margin-right: @padding-xs;
+      font-size: 20px;
+    }
+
+    &--with-icon {
+      .van-popover__action-text {
+        justify-content: flex-start;
+      }
     }
   }
 
@@ -60,18 +67,24 @@
   }
 
   &[data-popper-placement='top'] {
+    transform-origin: 50% 100%;
+
     .van-popover__arrow {
       left: 50%;
     }
   }
 
   &[data-popper-placement='top-start'] {
+    transform-origin: 0 100%;
+
     .van-popover__arrow {
       left: @padding-md;
     }
   }
 
   &[data-popper-placement='top-end'] {
+    transform-origin: 100% 100%;
+
     .van-popover__arrow {
       right: @padding-md;
     }
@@ -87,18 +100,24 @@
   }
 
   &[data-popper-placement='left'] {
+    transform-origin: 100% 50%;
+
     .van-popover__arrow {
       top: 50%;
     }
   }
 
   &[data-popper-placement='left-start'] {
+    transform-origin: 100% 0;
+
     .van-popover__arrow {
       top: @padding-md;
     }
   }
 
   &[data-popper-placement='left-end'] {
+    transform-origin: 100% 100%;
+
     .van-popover__arrow {
       bottom: @padding-md;
     }
@@ -114,18 +133,24 @@
   }
 
   &[data-popper-placement='right'] {
+    transform-origin: 0 50%;
+
     .van-popover__arrow {
       top: 50%;
     }
   }
 
   &[data-popper-placement='right-start'] {
+    transform-origin: 0 0;
+
     .van-popover__arrow {
       top: @padding-md;
     }
   }
 
   &[data-popper-placement='right-end'] {
+    transform-origin: 0 100%;
+
     .van-popover__arrow {
       bottom: @padding-md;
     }
@@ -141,18 +166,24 @@
   }
 
   &[data-popper-placement='bottom'] {
+    transform-origin: 50% 0;
+
     .van-popover__arrow {
       left: 50%;
     }
   }
 
   &[data-popper-placement='bottom-start'] {
+    transform-origin: 0 0;
+
     .van-popover__arrow {
       left: @padding-md;
     }
   }
 
   &[data-popper-placement='bottom-end'] {
+    transform-origin: 100% 0;
+
     .van-popover__arrow {
       right: @padding-md;
     }
@@ -187,7 +218,7 @@
     background-color: #4a4a4a;
 
     .van-popover__arrow {
-      color: @gray-8;
+      color: #4a4a4a;
     }
 
     .van-popover__action {
@@ -196,7 +227,7 @@
       }
 
       &--disabled {
-        color: @gray-7;
+        color: @gray-6;
 
         &:active {
           background-color: transparent;
@@ -211,10 +242,17 @@
     }
   }
 
-  // &-zoom-enter,
+  &-zoom-enter,
-  // &-zoom-leave-active {
+  &-zoom-leave-active {
-  //   transform: scale(0.8);
+    transform: scale(0.8);
-  //   opacity: 0;
+    opacity: 0;
-  //   transition: all 0.3s;
+  }
-  // }
+
+  &-zoom-enter-active {
+    transition-timing-function: @animation-timing-function-enter;
+  }
+
+  &-zoom-leave-active {
+    transition-timing-function: @animation-timing-function-leave;
+  }
 }