Detailed description of the animation effect of WeChat applets and mini-program animations

Explanation of the animation effect of the applet, and explanation of the animation effect of the Applet

Preface

The company plans to change from H5 page to mini-program writing. So I am working on developing small programs. I am not a front-end master, but a scum that writes back-end occasionally to the front-end. Please do not spray at the front-end.

1. What is a small program?

In my understanding, applets are only highly encapsulated H5, which encapsulates various components. According to the official statement, the applet program is not in the browser. It's a plug-in.

2. Small programs cannot manipulate DOM

Small programs cannot directly manipulate the DOM, encouraging data binding. For example, vue. js. Therefore, I personally feel that developers who are used to using JQ to manipulate DOM are not used to it. A habit process is required.

3. Small programs cannot reference JQ

Although small programs can reference external JS. However, an exception occurs when I reference it. It may need to be modified before it can be used. I thought it was a small program. Let's move on to the set of mini programs. So let's look at the small program's API.

4. Use a applet to implement basic switching Animation

Html code

Js Code

From the code above, we can see that I used checkCodeBtnOpacity and checkCodeOpacity respectively to control the transparency of the two blocks. Used to hide.

Use animationData to save animation data.

Then bindGetCheckCode is bound with a click event.

Then, the API wx. createAnimation is called, opacity (1) is called for display, and the translateY (-100) Y axis translation is called for an increase.

Related API parameters can view the applet API documentation, address: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html? T = 2017112 # wxcreateanimationobject

Next, call this. setData () to modify the data source. The animation is switched.

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!