feat(popup): 增加 move-center 动画

Author: QiuShuiBai

example/pages/popup/popup-content.mpx

@@ -5,7 +5,10 @@
       wx:ref="popup"
       maskClosable="{{ true }}"
       content="<i style='color:#fc9153'>Hello World</i>"
-      class="cube-extend-popup">
+      class="cube-extend-popup"
+      maskFadeTransition="{{ true }}"
+      transition="move-center"
+    >
     </cube-popup>
   </view>
 </template>

example/vue.config.js

@@ -43,6 +43,7 @@ module.exports = defineConfig({
     config.module.rules.delete('svg')
   },
   configureWebpack: {
+    cache: false,
     plugins: [
       new webpack.ProgressPlugin()
     ]

packages/mpx-cube-ui/__tests__/components/cascade-picker-modal/__snapshots__/cascade-picker-modal.spec.js.snap

@@ -4,6 +4,6 @@ exports[`component cascade-picker unit test base props check matchSnapshot 1`] =
 
 exports[`component cascade-picker unit test base props check matchSnapshot 2`] = `"<cube-picker-modal-base class=\\"main--ref_choosePopup_1 main--cube-cascade-picker-modal\\" data-eventconfigs=\\"[object Object]\\"><cube-modal class=\\"cube-picker-modal-base--cube-picker-modal-base cube-picker-modal-base--ref_choosePopup_1\\" data-eventconfigs=\\"[object Object]\\"><cube-popup class=\\"cube-modal--cube-modal cube-modal--ref_popup_1\\" data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"cube-popup--cube-popup cube-popup--cube-popup_mask cube-popup--cube-popup_mask_fade_transition cube-popup--cube-popup-bottom\\" style=\\"z-index: 100\\"><wx-view class=\\"cube-popup--cube-popup-mask\\" style=\\"\\"></wx-view><wx-view class=\\"cube-popup--cube-popup-content\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-section\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-header\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-close\\"><wx-view class=\\"cube-modal--cube-modal-close-icon\\"><cube-icon><wx-view class=\\"cube-icon--cubeic cube-icon--cubeic cube-icon--cubeic-close\\" style=\\"\\"></wx-view></cube-icon></wx-view></wx-view></wx-view><wx-view class=\\"cube-modal--cube-modal-body\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-main\\"><wx-view class=\\"cube-modal--cube-modal-content\\"><wx-view class=\\"cube-picker-modal-base--cube-picker-modal-content\\"><cube-cascade-picker class=\\"main--ref_picker_2\\"><cube-picker class=\\"cube-cascade-picker--ref_picker_1 cube-cascade-picker--cube-cascade-picker\\"><wx-view class=\\"cube-picker--cube-picker\\"><wx-picker-view class=\\"cube-picker--cube-picker-wheel-wrapper\\"><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:0\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Fruit text</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Drink</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Dessert</wx-view></wx-picker-view-column><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:1\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Coffee</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Tea</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Juice</wx-view></wx-picker-view-column><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:2\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">One</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Two</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Three</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Four</wx-view></wx-picker-view-column></wx-picker-view></wx-view></cube-picker></cube-cascade-picker></wx-view></wx-view></wx-view></wx-view><wx-view class=\\"cube-modal--cube-modal-footer\\" style=\\"\\"><cube-confirm-button-group class=\\"cube-modal--cube-modal-confirm-button-group\\"><cube-button-group class=\\"cube-confirm-button-group--cube-confirm-button-group cube-confirm-button-group--cube-confirm-button-group_vertical\\"><wx-view class=\\"cube-button-group--cube-button-group cube-button-group--cube-button-group_vertical\\"><cube-button class=\\"cube-confirm-button-group--cube-option-confirm-button\\"><wx-button style=\\"\\" class=\\"cube-button--cube-btn cube-button--cube-btn-primary\\"><wx-view class=\\"cube-button--cube-btn-content\\" style=\\"\\">确定</wx-view></wx-button></cube-button></wx-view></cube-button-group></cube-confirm-button-group></wx-view></wx-view></wx-view></wx-view></cube-popup></cube-modal></cube-picker-modal-base>"`;
 
-exports[`component cascade-picker unit test base set props check matchSnapshot 1`] = `"<cube-picker-modal-base class=\\"main--ref_choosePopup_1 main--cube-cascade-picker-modal\\" data-eventconfigs=\\"[object Object]\\"><cube-modal class=\\"cube-picker-modal-base--cube-picker-modal-base cube-picker-modal-base--ref_choosePopup_1\\" data-eventconfigs=\\"[object Object]\\"><cube-popup class=\\"cube-modal--cube-modal cube-modal--ref_popup_1\\" data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"cube-popup--cube-popup cube-popup--cube-popup_mask cube-popup--cube-popup_mask_fade_transition cube-popup--cube-popup_transition cube-popup--cube-popup-bottom cube-popup--show\\" style=\\"z-index: 100\\"><wx-view class=\\"cube-popup--cube-popup-mask\\" style=\\"\\"></wx-view><wx-view class=\\"cube-popup--cube-popup-content cube-popup--move-up\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-section\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-header\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-close\\"><wx-view class=\\"cube-modal--cube-modal-close-icon\\"><cube-icon><wx-view class=\\"cube-icon--cubeic cube-icon--cubeic cube-icon--cubeic-close\\" style=\\"\\"></wx-view></cube-icon></wx-view></wx-view></wx-view><wx-view class=\\"cube-modal--cube-modal-body\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-main\\"><wx-view class=\\"cube-modal--cube-modal-title\\">选择器</wx-view><wx-view class=\\"cube-modal--cube-modal-content\\"><wx-rich-text><wx-view class=\\"rich-text\\">内容</wx-view></wx-rich-text><wx-view class=\\"cube-picker-modal-base--cube-picker-modal-content\\"><cube-cascade-picker class=\\"main--ref_picker_2\\"><cube-picker class=\\"cube-cascade-picker--ref_picker_1 cube-cascade-picker--cube-cascade-picker\\"><wx-view class=\\"cube-picker--cube-picker\\"><wx-picker-view class=\\"cube-picker--cube-picker-wheel-wrapper\\"><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:0\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Fruit text</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Drink</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Dessert</wx-view></wx-picker-view-column><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:1\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Coffee</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Tea</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Juice</wx-view></wx-picker-view-column><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:2\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">One</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Two</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Three</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Four</wx-view></wx-picker-view-column></wx-picker-view></wx-view></cube-picker></cube-cascade-picker></wx-view></wx-view></wx-view></wx-view><wx-view class=\\"cube-modal--cube-modal-footer\\" style=\\"\\"><cube-confirm-button-group class=\\"cube-modal--cube-modal-confirm-button-group\\"><cube-button-group class=\\"cube-confirm-button-group--cube-confirm-button-group cube-confirm-button-group--cube-confirm-button-group_vertical\\"><wx-view class=\\"cube-button-group--cube-button-group cube-button-group--cube-button-group_vertical\\"><cube-button class=\\"cube-confirm-button-group--cube-option-confirm-button\\"><wx-button style=\\"\\" class=\\"cube-button--cube-btn cube-button--cube-btn-primary\\"><wx-view class=\\"cube-button--cube-btn-content\\" style=\\"\\">确定</wx-view></wx-button></cube-button></wx-view></cube-button-group></cube-confirm-button-group></wx-view></wx-view></wx-view></wx-view></cube-popup></cube-modal></cube-picker-modal-base>"`;
+exports[`component cascade-picker unit test base set props check matchSnapshot 1`] = `"<cube-picker-modal-base class=\\"main--ref_choosePopup_1 main--cube-cascade-picker-modal\\" data-eventconfigs=\\"[object Object]\\"><cube-modal class=\\"cube-picker-modal-base--cube-picker-modal-base cube-picker-modal-base--ref_choosePopup_1\\" data-eventconfigs=\\"[object Object]\\"><cube-popup class=\\"cube-modal--cube-modal cube-modal--ref_popup_1\\" data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"cube-popup--cube-popup cube-popup--cube-popup_mask cube-popup--cube-popup_mask_fade_transition cube-popup--cube-popup_transition cube-popup--cube-popup-bottom cube-popup--show\\" style=\\"z-index: 100\\"><wx-view class=\\"cube-popup--cube-popup-mask\\" style=\\"\\"></wx-view><wx-view class=\\"cube-popup--cube-popup-content cube-popup--cube-popup-move-up\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-section\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-header\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-close\\"><wx-view class=\\"cube-modal--cube-modal-close-icon\\"><cube-icon><wx-view class=\\"cube-icon--cubeic cube-icon--cubeic cube-icon--cubeic-close\\" style=\\"\\"></wx-view></cube-icon></wx-view></wx-view></wx-view><wx-view class=\\"cube-modal--cube-modal-body\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-main\\"><wx-view class=\\"cube-modal--cube-modal-title\\">选择器</wx-view><wx-view class=\\"cube-modal--cube-modal-content\\"><wx-rich-text><wx-view class=\\"rich-text\\">内容</wx-view></wx-rich-text><wx-view class=\\"cube-picker-modal-base--cube-picker-modal-content\\"><cube-cascade-picker class=\\"main--ref_picker_2\\"><cube-picker class=\\"cube-cascade-picker--ref_picker_1 cube-cascade-picker--cube-cascade-picker\\"><wx-view class=\\"cube-picker--cube-picker\\"><wx-picker-view class=\\"cube-picker--cube-picker-wheel-wrapper\\"><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:0\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Fruit text</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Drink</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Dessert</wx-view></wx-picker-view-column><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:1\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Coffee</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Tea</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Juice</wx-view></wx-picker-view-column><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:2\\"><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">One</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Two</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Three</wx-view><wx-view class=\\"cube-picker--cube-picker-wheel-item\\">Four</wx-view></wx-picker-view-column></wx-picker-view></wx-view></cube-picker></cube-cascade-picker></wx-view></wx-view></wx-view></wx-view><wx-view class=\\"cube-modal--cube-modal-footer\\" style=\\"\\"><cube-confirm-button-group class=\\"cube-modal--cube-modal-confirm-button-group\\"><cube-button-group class=\\"cube-confirm-button-group--cube-confirm-button-group cube-confirm-button-group--cube-confirm-button-group_vertical\\"><wx-view class=\\"cube-button-group--cube-button-group cube-button-group--cube-button-group_vertical\\"><cube-button class=\\"cube-confirm-button-group--cube-option-confirm-button\\"><wx-button style=\\"\\" class=\\"cube-button--cube-btn cube-button--cube-btn-primary\\"><wx-view class=\\"cube-button--cube-btn-content\\" style=\\"\\">确定</wx-view></wx-button></cube-button></wx-view></cube-button-group></cube-confirm-button-group></wx-view></wx-view></wx-view></wx-view></cube-popup></cube-modal></cube-picker-modal-base>"`;
 
 exports[`component cascade-picker unit test slot check matchSnapshot 1`] = `"<main><cube-picker-modal-base class=\\"main--ref_choosePopup_1 main--cube-cascade-picker-modal\\" data-eventconfigs=\\"[object Object]\\"><cube-modal class=\\"cube-picker-modal-base--cube-picker-modal-base cube-picker-modal-base--ref_choosePopup_1\\" data-eventconfigs=\\"[object Object]\\"><cube-popup class=\\"cube-modal--cube-modal cube-modal--ref_popup_1\\" data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"cube-popup--cube-popup cube-popup--cube-popup_mask cube-popup--cube-popup_mask_fade_transition cube-popup--cube-popup-bottom\\" style=\\"z-index: 100\\"><wx-view class=\\"cube-popup--cube-popup-mask\\" style=\\"\\"></wx-view><wx-view class=\\"cube-popup--cube-popup-content\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-section\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-header\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-close\\"><wx-view class=\\"cube-modal--cube-modal-close-icon\\"><cube-icon><wx-view class=\\"cube-icon--cubeic cube-icon--cubeic cube-icon--cubeic-close\\" style=\\"\\"></wx-view></cube-icon></wx-view></wx-view><wx-view class=\\"header-slot\\">head</wx-view></wx-view><wx-view class=\\"cube-modal--cube-modal-body\\" style=\\"\\"><wx-view class=\\"cube-modal--cube-modal-main\\"><wx-view class=\\"cube-modal--cube-modal-content\\"><wx-view class=\\"cube-picker-modal-base--cube-picker-modal-content\\"><cube-cascade-picker class=\\"main--ref_picker_2\\"><cube-picker class=\\"cube-cascade-picker--ref_picker_1 cube-cascade-picker--cube-cascade-picker\\"><wx-view class=\\"cube-picker--cube-picker\\"><wx-picker-view class=\\"cube-picker--cube-picker-wheel-wrapper\\"><wx-picker-view-column class=\\"cube-picker--cube-picker-wheel-scroll\\" style=\\"order:0\\"></wx-picker-view-column></wx-picker-view></wx-view></cube-picker></cube-cascade-picker></wx-view></wx-view></wx-view></wx-view><wx-view class=\\"cube-modal--cube-modal-footer\\" style=\\"\\"><cube-confirm-button-group class=\\"cube-modal--cube-modal-confirm-button-group\\"><cube-button-group class=\\"cube-confirm-button-group--cube-confirm-button-group cube-confirm-button-group--cube-confirm-button-group_vertical\\"><wx-view class=\\"cube-button-group--cube-button-group cube-button-group--cube-button-group_vertical\\"><cube-button class=\\"cube-confirm-button-group--cube-option-confirm-button\\"><wx-button style=\\"\\" class=\\"cube-button--cube-btn cube-button--cube-btn-primary\\"><wx-view class=\\"cube-button--cube-btn-content\\" style=\\"\\">确定</wx-view></wx-button></cube-button></wx-view></cube-button-group></cube-confirm-button-group><wx-view class=\\"footer-slot\\">footer</wx-view></wx-view></wx-view></wx-view></wx-view></cube-popup></cube-modal></cube-picker-modal-base></main>"`;