How to realize pop-up and hide mask layer animation by WeChat Mini Programs

This article mainly introduces "how WeChat Mini Programs realizes pop-up and hide mask layer animation". In daily operation, I believe many people have doubts about how WeChat Mini Programs realizes pop-up and hide mask layer animation. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how WeChat Mini Programs realizes pop-up and hide mask layer animation". Next, please follow the editor to study!

Train.wxml

{{bankname}} {{index+1}} / {{allquestion.length}} A {{questionlist.choiceA}} B {{questionlist.choiceB}} C {{questionlist.choiceC}} D {{questionlist.choiceD}} reference answer: {{questionlist.answer}\ nReferential Analysis: {{questionlist.analysis}} check the answer is it useful to you? Give me a score. Make sure.

Train.js

Var interval = ""; / / the object that periodically executes the function var time = 0 var touchDot / sliding time var flag_hd = 0 handle / origin at touch var flag_hd = true;// to determine whether it is possible to slide let animationShowHeight = 300 / / Animation offset height Page (initial data of {/ * page * / data: {/ / mask layer variable animationData: ", showModalStatus: false, imageHeight: 0, imageWidth: 0, / / score variable stars: [0,1,2,3,4], / / score array normalSrc:'. / images/score.png' / / Hollow star picture path selectedSrc:'.. / images/fullstar.png',// Select star picture path key: 0Magna pare / score}, / / Click the star selectRight: function (e) {var key = e.currentTarget.dataset.key console.log ("get" + key + "score") this.setData ({key: key})} / / confirm the score mark_click: function () {this.hideModal ()}, / / display the mask layer showModal: function () {/ / create an animation instance animation. Call the method of the instance to describe the animation. Var animation = wx.createAnimation ({duration: 500, / / Animation duration 500ms timingFunction: "ease", / / Animation starts at a low speed and then speeds up Before the end, slow down delay: 0 / / animation delay time 0ms}) this.animation = animation / / call the animation operation method to call step () to represent a set of animation completion animation.translateY (animationShowHeight). Step () / offset 300 this.setData in the Y axis ({/ / the animation data is exported to the component's animation property through the animation instance's export method. AnimationData: animation.export (), showModalStatus: true / / Show mask layer}) setTimeout (function () {animation.translateY (0). Step () this.setData ({animationData: animation.export ()})} .bind (this), 1)}, / / hide mask layer hideModal: function () {var animation = wx.createAnimation ({duration: 500, timingFunction: "ease" Delay: 0}) this.animation = animation Animation.translateY (animationShowHeight) .step () this.setData ({animationData: animation.export (),}) setTimeout (function () {animation.translateY (0) .step () this.setData ({animationData: animation.export (), showModalStatus: false})} .bind (this), / / score button score_click: function () {} / * Lifecycle function-listening page loading * / onLoad: function (options) {}, / * Lifecycle function-first rendering completed * / onReady: function () {}, / * Lifecycle function-listening page display * / onShow: function () {flag_hd = true / / after re-entering the page, you can execute the sliding switch page code clearInterval (interval) again; / / clear setInterval time = 0; let that = this; wx.getSystemInfo ({success: function (res) {animationShowHeight = res.windowHeight) }})}, / * Lifecycle function-listening Page Hidden * / onHide: function () {}, / * Lifecycle function-listening Page unloading * / onUnload: function () {}, / * Page related event handling function-listening for user drop-down actions * / onPullDownRefresh: function () {} / * Handler function for pull bottom event on the page * / onReachBottom: function () {}, / * users click on the upper right corner to share * / onShareAppMessage: function () {},})

Train.wxss

Page {background-color: # fff;} / *-rating mask layer-* / / * share button * / .share_btn::after {border: none;} / * entire rating mask layer * / .buydes-dialog-container {width: 100%; height: 300rpx; justify-content: space-between; background-color: # fff Position: fixed; bottom: 101rpx; / * z-index: 998; * / border-top: 1rpx solid # e8e8e8;} / * Top of the rating mask layer * / .buydes-dialog-container-top {height: 100rpx; padding-top: 20rpx; display: flex; justify-content: center; flex-grow: 1; font-size: 32rpx; color: # 7373;} / * bottom of the rating mask layer * / .buydes-dialog-container-bottom {height: 150rpx Padding-top: 20rpx; background-color: # fff; display: flex; justify-content: center; flex-grow: 0;} / * Hollow star image * / .star-image {position: absolute; top: 100rpx; width: 60rpx; height: 60rpx; src: ".. /.. / images/score.png";} / * the area where the score click is triggered * / .item {position: absolute; top: 0rpx; width: 60rpx; height: 60rpx } / * confirm rating button * / .mark_btn {width: 100%; height: 100rpx; background-color: # fff; color: # 55c5ac; display: flex; justify-content: center; align-items: center; border-top: 1rpx solid # eaeaea; margin-top: 60rpx; margin-bottom: 150rpx; font-size: 32rpx;} / * transparent mask layer (top) * / .touming_top {width: 100%; height: 900rpx; opacity: 0 Position: fixed; bottom: 402rpx; z-index: 998;} / * transparent mask layer (bottom) * / .touming {width: 100%; height: 101rpx; opacity: 0; position: fixed; bottom: 0rpx; z-index: 998;} at this point, the study on "how WeChat Mini Programs implements pop-up and hidden mask layer animation" is over. I hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!