diff --git a/dist/dialog/index.wxml b/dist/dialog/index.wxml index 0ee61035..7b6ee235 100644 --- a/dist/dialog/index.wxml +++ b/dist/dialog/index.wxml @@ -1,5 +1,6 @@ <van-popup show="{{ show }}" + transition="scale" overlay="{{ overlay }}" close-on-click-overlay="{{ closeOnClickOverlay }}" custom-class="van-dialog" diff --git a/dist/popup/index.js b/dist/popup/index.js index 56584e72..4be838c1 100644 --- a/dist/popup/index.js +++ b/dist/popup/index.js @@ -5,6 +5,7 @@ create({ mixins: [transition(false)], props: { + transition: String, overlayStyle: String, overlay: { type: Boolean, diff --git a/dist/popup/index.wxml b/dist/popup/index.wxml index 83b9bb1d..37004528 100644 --- a/dist/popup/index.wxml +++ b/dist/popup/index.wxml @@ -7,7 +7,7 @@ <view wx:if="{{ inited }}" class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }}" - style="animation-name: van-{{ position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}" + style="animation-name: van-{{ transition || position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}" bind:animationend="onAnimationEnd" > <slot /> diff --git a/dist/popup/index.wxss b/dist/popup/index.wxss index afc0ec37..39c48829 100644 --- a/dist/popup/index.wxss +++ b/dist/popup/index.wxss @@ -1 +1 @@ -.van-popup{top:50%;left:50%;z-index:11;position:fixed;max-height:100%;overflow-y:auto;box-sizing:border-box;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-animation:ease both;animation:ease both}.van-popup--center{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%}.van-popup--right{top:50%;right:0;bottom:auto;left:auto}.van-popup--bottom{width:100%;top:auto;bottom:0;right:auto;left:50%}.van-popup--left{top:50%;right:auto;bottom:auto;left:0}@-webkit-keyframes van-center-enter{from{opacity:0}to{opacity:1}}@keyframes van-center-enter{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-center-leave{from{opacity:1}to{opacity:0}}@keyframes van-center-leave{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@-webkit-keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@-webkit-keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@-webkit-keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}} \ No newline at end of file +.van-popup{top:50%;left:50%;z-index:11;position:fixed;max-height:100%;overflow-y:auto;box-sizing:border-box;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-animation:ease both;animation:ease both}.van-popup--center{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%}.van-popup--right{top:50%;right:0;bottom:auto;left:auto}.van-popup--bottom{width:100%;top:auto;bottom:0;right:auto;left:50%}.van-popup--left{top:50%;right:auto;bottom:auto;left:0}@-webkit-keyframes van-center-enter{from{opacity:0}}@keyframes van-center-enter{from{opacity:0}}@-webkit-keyframes van-center-leave{to{opacity:0}}@keyframes van-center-leave{to{opacity:0}}@-webkit-keyframes van-scale-enter{from{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@keyframes van-scale-enter{from{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@-webkit-keyframes van-scale-leave{to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@keyframes van-scale-leave{to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@-webkit-keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@-webkit-keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@-webkit-keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@-webkit-keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}} \ No newline at end of file diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml index 0ee61035..7b6ee235 100644 --- a/packages/dialog/index.wxml +++ b/packages/dialog/index.wxml @@ -1,5 +1,6 @@ <van-popup show="{{ show }}" + transition="scale" overlay="{{ overlay }}" close-on-click-overlay="{{ closeOnClickOverlay }}" custom-class="van-dialog" diff --git a/packages/popup/index.js b/packages/popup/index.js index 56584e72..4be838c1 100644 --- a/packages/popup/index.js +++ b/packages/popup/index.js @@ -5,6 +5,7 @@ create({ mixins: [transition(false)], props: { + transition: String, overlayStyle: String, overlay: { type: Boolean, diff --git a/packages/popup/index.pcss b/packages/popup/index.pcss index 5a26e86b..0988ae6e 100644 --- a/packages/popup/index.pcss +++ b/packages/popup/index.pcss @@ -51,22 +51,28 @@ from { opacity: 0; } - - to { - opacity: 1; - } } @keyframes van-center-leave { - from { - opacity: 1; - } - to { opacity: 0; } } +@keyframes van-scale-enter { + from { + opacity: 0; + transform: translate3d(-50%, -50%, 0) scale(0.7); + } +} + +@keyframes van-scale-leave { + to { + opacity: 0; + transform: translate3d(-50%, -50%, 0) scale(0.7); + } +} + @keyframes van-bottom-enter { from { transform: translate3d(-50%, 100%, 0); diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml index 83b9bb1d..37004528 100644 --- a/packages/popup/index.wxml +++ b/packages/popup/index.wxml @@ -7,7 +7,7 @@ <view wx:if="{{ inited }}" class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }}" - style="animation-name: van-{{ position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}" + style="animation-name: van-{{ transition || position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}" bind:animationend="onAnimationEnd" > <slot />