Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you how to use the css transition attribute to achieve a painting that shows and conceals the relevant knowledge of WeChat Mini Programs parts, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

Code

Page ({data: {show:false// is used to show or hide controls}, chanMask:function () {var isShow = this.data.show? False: true;// hides if it shows, and hides it shows this.setData ({show:isShow})}) / * before index.wxss*//* shows * / .mask-con {transition: 1s; position: fixed;width: 100% text-align: center;line-height: 300rpx left: 0There bottom:-300rpx; text-align: center;line-height: 300rpx box shadow: 0 1px 10px # aaa;} / * after display * / .rpx {bottom: 0 } click me X to fly slowly.

In the above code, we first define a show variable in data for the display state of the mask-con control, change this variable alternately in the chanMask function, and then bind the chanMask function to the click events of the button and close controls. finally, we decide whether to add a class: mask-con-show to mask-con (our animation control) according to show. So here we have implemented an explicit and implicit widget with transition.

Now a lot of APP or Mini Program close pop-up control in this way, that X user point is not fun, see here smart friends may want to add another shadow control in the lower layer of mask-con and bind our chanMask function, then shadow control and our mask-con may not be in a whole, not intuitive enough For example, the leader wants to let the shadow have the effect of slowly deepening the display color and slowly fading the hidden shadow. in order to deal with this situation, we adjust the code as follows:

Page ({data: {show:false// to show or hide mask controls}, chanMask:function () {var isShow = this.data.show? False: true;// hides if it shows, and hides it shows this.setData ({show:isShow})}) / * index.wxss*/.mask-shadow {width: 100% mask-con height: 100%; opacity: 0 position height: 1s;} .mask-shadow-on {opacity: 0.3;} .mask-con {position: absolute;width: 100% mask-con height: 300rpx left: 0x bottom:-300rpx; transition: 1s leading text: center Line-height: 300rpx aaa; box shadow: 0 1px 10px # box shadow} .mask-con-show {bottom: 0;} point I X fly slowly

Here we set up two style class names mask-shadow-on and mask-con-show to define the shadow and the main control mask-con animation effect (specific code according to their own needs), everything seems to be OK, no problem, then first run a wave, Emma, what is the situation? Shadow and our mask-con directly come out without transitional effect, so why does this affect the effect of our program? after some consideration, bloggers find that our transition property may fail when display is none. Then some friends here may ask, "blogger, that's not right. Why do we still have such a problem when we have set mask's display to block?"

Well, it takes a little time for our mask control to display it completely. However, after our variable show is set to true, our shadow control and main controls will immediately add the post-animation style class name. This time is faster than the time required for mask display, so our machine thinks that mask is still in a situation where display is none.

For example: mask is the boss of this whole block, and even before the show is finished, you younger brothers have already come out to steal the limelight. Where do you want to be the boss? no, I have to kill all of you who steal my thunder and see you show off. This boss doesn't talk too much, you can't steal his limelight, you won't be happy if you don't want to perform him (user experience), and he won't tell you after the performance, what should I do if this boss is so difficult to serve? Do some friends already feel confused? what are you waiting for? pick up the phone in your hand and call the helpline. Ah, Bah, it's too far.

In fact, the solution is very simple, yes, the answer is the setTimeout () function, come on, let's change the code again:

Page ({data: {show:false,// is used to show or hide the mask control runAM:false// for animation execution}, chanMask:function () {var isShow = this.data.show? False: true;// hides if it shows, and hides shows var delay = isShow? 30: 1000 show:isShow / the first time is the time required by the blogger to detect the time required for the control to display, and the second is the time required for animation if (isShow) {this.setData ({show:isShow}) } else {this.setData ({runAM:isShow})} setTimeout (function () {if (isShow) {this.setData ({runAM:isShow});} else {this.setData ({show:isShow})) }}, delay);}}) click on me X to fly slowly

In the above code, we add a new variable runAM to data for the credential when the animation starts, and then define a variable in the chanMask function to set the delay. The delay code may be a bit rough around the blogger here.

The whole process of the program is based on the variable isShow.

When isShow is true, that means we are going to open the mask control, so we first display the mask control, and then add the style class name to the control to perform the animation after a delay of 30 milliseconds

When isShow is false, we first remove the class name of the animation control (after removal, the animation will be performed back to the original form), and then let mask hide it after a delay of 1000 milliseconds (the time required for animation).

These are all the contents of the article "how to use the css transition attribute to achieve a WeChat Mini Programs part that drives the painting to be visible and hidden". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.