Css+transition make explicit animations

This time to everyone to bring css+transition to make explicit animation, the attention of the matter of what, the following is the actual case, together to see.

Let's see first.

A small part with transition effect in our actual development of the application probability is still relatively large, However, in the process of developing the small program may have a small partner found transition this property it does not work (described below) so we will consider to use the official Wx.createanimation API to create the animation.

Next, I'll take you guys. How to make the transition attribute work in this requirement, the code below

Page ({    data: {        show:false//used to show or hide    the control},    chanmask:function () {        var isshow = This.data.show? false : true;//If display is hidden, hide to show        this.setdata ({            show:isshow        })    })

/*index.wxss*//* show the former */.mask-con{transition:1s; Position:fixed;width:100%;height:300rpx;left:0;bottom: -300rpx; text-align:center;line-height:300rpx;box-shadow:0 1px 10px #aaa;} /* display after */.mask-con-show{bottom:0;} <!--index.wxml--><view class= "container" ><button bindtap= "Chanmask" > Point me </button><view Class= "Mask-con {show? ' Mask-con-show ': '} ' ><view class= "close" bindtap= "Chanmask" >X</view> slowly fly </view></view >

In the above code we first define a show variable for the display state of the Mask-con control in data, alternately change the variable in the Chanmask function, and then bind the Chanmask function to the Click event of the button and the close control. Finally, we decide whether to add a class:mask-con-show to Mask-con (our animation control) based on show so here we have implemented a hidden widget with transitions, but for some requirements this is too reluctant, for example:

Now a lot of apps or small programs are in this way to close the pop-up window control, the X-user point of addiction, See here the clever little companion might think of adding another shadow control to the lower layer of mask-con and binding on our chanmask function, so that the shadow control and our Mask-con may not be on a whole, not intuitive, For example, the leader wants to make this shadow. It has a display color slowly deepened, hiding the effect of slow fade, in order to deal with this situation, we adjust the code as follows:

page ({data: {show:false//used to show or hide the Mask control}, Chanmask:function () { var isshow = this.data.show? false:true;//If the display is hidden, hide it to show This.setdata ({show:isshow})})/*index.wxss*/.mask-shadow{width : 100%;height:100%; Opacity:0;transition:1s;}. mask-shadow-on{opacity:0.3;}. Mask-con{position:absolute;width:100%;height:300rpx;left:0;bottom: -300rpx; transition:1s;text-align:center; line-height:300rpx;box-shadow:0 1px 10px #aaa;}. mask-con-show{bottom:0;} <!--index.wxml--><view class= "container" ><button bindtap= "Chanmask" > Point I </button><view class= "Mask {{show?} ' Show ': ' Hide '} ' ><view class= ' Mask-shadow {show? ' Mask-shadow-on ': '}} ' ></view><view class= ' Mask-con {show? ' Mask-con-show ': '} ' ><view class= "close" bindtap= "Chanmask" >X</view> slowly fly </view></view ></view> 

Here we set up two style class names mask-shadow-on and mask-con-show to define the effect of the shadow as well as the main control Mask-con the animation (depending on your needs), everything looks OK, no problem, then run first wave, Emma, God horse situation? The shadow and our Mask-con directly godless out without the transition effect, that is why the effect of our program, after some considerations bloggers found that in the case of display is none of our transition property may be invalid, then some of the small partners here may ask "blogger, That's not right, we have already set the mask display to block how can we still have this problem? "

So, our mask control shows that it takes a little bit of time to fully display it, but after our variable show is set to true, our shadow control and the main control are added immediately after the animated style class name, which is faster than the mask display time, So our machine it thinks mask is still in the display is none of the situation

For example: Mask is the boss of this whole piece, this old most have not performed, you do the younger brother has come out to rob the Thunder, you let the face of the boss where to put, not I have to take you these Rob my thunder all to kill, see you also have to. The boss of the people do not talk much, you rob his thunder, you do not want to show him (user experience) is not happy, and he finished not to tell you, the boss so difficult to wait to do? Some small partners have already felt confused, that still waiting for what, quickly pick up your hands of the phone call helpline .... Oh, yuck, it's far away.

In fact, the solution is very simple, yes the answer is setTimeout () function, we will change the code again:

Page ({data: {show:false,//) is used to show or hide the mask control runam:false//used for animation execution based on}, Chanmask:function () { var isshow = this.data.show? false:true;//If the display is hidden, hide it shows var delay = isshow?            30:1000;//The first time the blogger measured the time required for the control to display, the second is the time required for the 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); }}) <!--index.wxml--><view class= "container" ><button bindtap= "Chanmask" > Point me </button>< View Class= "Mask {{show?} ' Show ': ' Hide '} ' bindtap= ' Chanmask ' ><view class= ' Mask-shadow {{Runam? ' Mask-shadow-on ': '}} ' ></view><view class= ' Mask-con {{Runam? 'Mask-con-show ': '}} "><view class=" Close "bindtap=" Chanmask ">X</view> slowly fly </view></view ></view>

In the above code, we have added a new variable Runam to the data for when the animation starts executing, and then the Chanmask function defines a variable delay code that is used to set the delay. It might be a bit of a detour.

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

When Isshow is true, that means we're going to open the mask control, so let's show the Mask control first, and then add the style class name to the control you want to animate after 30 milliseconds of delay.

When Isshow is false, we first remove the class name of the animation control (and then perform the animation back to its original shape), and then let mask hide after 1000 milliseconds of delay (the time it takes to animate)

About the first value of the delay set when the blogger himself, if the small partners are also worried that the control is not shown can be set to 50 milliseconds or 100 milliseconds without the impact of this 0.1 second time difference on the user experience is not big, such as you set a 1 seconds did not respond, I can only say change cell phone

Finally, you will find that throughout the process, bloggers only call a function to show or hide, and not to close the new function processing, this writing force is full of wood has

This method is also suitable for H5

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Vue.js How to customize the action login form code

Use JS to transfer JSON in front and back