Origin: it is necessary to always feel oneself encapsulates a popup window components, realize the demand of different products, but should pay attention to interaction experience again, add a zoom animation, never write a good, finally, wrote in a few days ago a I think silky, animation, pop-up components, ha ha ha ha ha ha ha ha ha ha ha ha ha ha

Let’s start with animation

Css3 animation, mask layer from Rgba (0, 0, 0, 0) to Rgba (0, 0, 0, 0.7), popover body using transform: translate(-50%, -50%) scale(0); Transform: translate(-50%, -50%) scale(1); Top: 50%; Left: 50%,

The key is the disappearance of animation

Because the animation needs to be retracted, the animation time is obviously unable to meet China’s requirements if a flag is transmitted outside the world to control it. Therefore, WHAT I do is to write another flag inside the popover. When a flag transmitted outside is true, the dialogFlag inside is also true. When the dialogFlag is displayed, the outside flag will trigger the inside flag. When the dialogFlag disappears, the inside flag will trigger the outside flag. Set the dialogFlag to false first, delay 0.3s, and then set the outside flag to false. This requires observers with wechat, which monitors external flags and sets internal ones

Event firing for the applets component

TriggerEvent, which takes three parameters, triggerEvent(event name, parameters, event options — control bubbling, capture)

That’s about it. Here’s the complete code:

WXML: Because some of the scenes are intended to cover up maps, or images, I use a cover-view <! --Component/dialog/dialog.wxml--> <cover-view wx:if="{{show}}" class="{{dialogFlag? 'mask':'mask hideMask'}}" catchtap="close"> <cover-view class="dialog" style="width:{{dialogWidth}}"> <cover-view class="dialog_title" wx:if="{{title}}">{{title}}</cover-view> <cover-view class="dialog_body" wx:if="{{content}}">{{content}}</cover-view> <slot></slot> <cover-view class="dialog_footer"> <cover-view </cover-view> <cover-view class=" dialog_bTN "catchtap="close"> Catchtap ="confirm"> catchtap </cover-view> </cover-view> </cover-view> </cover-view> <! Bind :close="onClose"></dialog> --> <dialog title=" prompt "show="{{show}}" content="Copy the code
wxss: /* Component/dialog/dialog.wxss */ .mask { top: 0; left: 0; width: 100%; height: 100%; position: fixed; Animation: enterMask 0.3 s; Background: RGBA (0, 0, 0, 0.7); display: block; } .dialog { padding: 40rpx; box-sizing: border-box; background: #ffffff; border-radius: 20rpx; position: absolute; left: 50%; top: 50%; Animation: enterDialog 0.3 s; transform: translate(-50%, -50%); }. HideMask {animation: leaveMask 0.3s; display: block; } .hideMask .dialog { transform: translate(-50%, -50%) scale(0); display: block; Animation: leaveDialog 0.3 s; } @keyframes enterMask { from { background: rgba(0, 0, 0, 0); display: none; } to {background: rgba(0, 0, 0, 0.7); display: block; }} @keyframes leaveMask {from {background: rgba(0, 0, 0, 0.7); display: block; } to { background: rgba(0, 0, 0, 0); display: none; } } @keyframes enterDialog { from { /* transform: ; */ transform: translate(-50%, -50%) scale(0); } to { /* transform: ; */ transform: translate(-50%, -50%) scale(1); } } @keyframes leaveDialog { from { /* transform: ; */ transform: translate(-50%, -50%) scale(1); display: block; } to { /* transform: ; */ transform: translate(-50%, -50%) scale(0); display: none; } } .dialog_title { font-size: 32rpx; font-weight: 500; text-align: center; color: #333333; padding: 20rpx 0 40rpx; } .dialog_body { font-size: 24rpx; font-weight: 400; color: #666666; line-height: 33rpx; margin: 0 auto; width: 340rpx; white-space: normal; text-align: center; } .dialog_footer { display: flex; padding: 60rpx 50rpx 10rpx; justify-content: space-between; } .dialog_btn { width: 200rpx; height: 70rpx; background: #ffffff; border: 2rpx solid #009aff; border-radius: 35rpx; font-size: 28rpx; font-weight: 400; text-align: center; color: #009aff; line-height: 70rpx; } .dialog_primary { background: #009AFF; color: #fff; }Copy the code
Json: General configuration of components {" Component ": true, "usingComponents": {}}Copy the code
Component({/** * props */ properties: {// title: {type: String, value: "}, // content: { type: String, value: }, // display - hide flag show:{type:Boolean, value:false}, // Display the bottom button footer:{type:Boolean, value:true}, DialogWidth :{type: String, value: '650rpx'}}, /** * the initial data of the component */ data: {dialogFlag:false}, /** * components of the list of methods */ methods: TriggerEvent ('myevent', myEventDetail, myEventDetail, myEventDetail, myEventDetail, myEventDetail, myEventDetail, myEventDetail, myEventDetail, myEventDetail, myEventDetail, myEventDetail MyEventOption) Myevent: indicates the name of the event to be triggered. MyEventDetail: indicates the parameter to be passed out. Event options {bubbles Boolean No False Whether events are composed Boolean No False Whether events can cross component boundaries. If false, events can only be fired in the node tree that refers to the component. CapturePhase Boolean no false whether the event has a capturePhase} */ this.setdata ({dialogFlag:false}) setTimeout(()=>{ this.triggerEvent('close') },300) }, confirm(){ setTimeout(()=>{ this.triggerEvent('confirm') },300) } }, observers: {// Listen on props, set dialogFlag 'show': function() { // console.log(this.properties.show) if (this.properties.show) { this.setData({ dialogFlag:true }) } } } })Copy the code

Here is the end of the very nice, if there are friends have a better solution, you can comment on it