preface
We built a company-level H5 editor solution internally based on Vue, which also included highly customized animations – the first version was customized by our sister who specializes in animation and then provided configuration.
demand
Require transitions between three images:
The first slide zooms in slowly from normal, and the last frame the first slide disappears
In the second slide it appears, offset from left to right
The third slide, right to left.
The difficulties in
1. How to hide images transparently in the last frame?
2. How to coordinate the transition between pictures perfectly?
Three images to animate the transition. Next, let’s look at the code:
HTML
[class name filtered, at least for indication]
There are three divs that contain images and the two classes behind each div have different names
Img0, IMg1, img2 are written in different styles
Pulled, PulledL, PulledR this class name is to write different animations
Focus on how animations transition from one animation to another, as shown below:
css
The first two images are animated, and the last frame is transparent and hidden. The general idea is that
Opacity :1; Write to 100% opacity: 0
However, you will see that the effect is not what we want
Here also thanks to the idea provided by da Mo teacher, as follows:
Do opacity:1 for 99% and 100% of animation; opacity:0;
Animations Debugging Tool
We have introduced Chrome’s tool for debugging Animations, called Animations
This tool can debug the transition time between animations directly in the browser, so that the upper and lower animations can be perfectly connected, as shown in the picture:
Interested partners can go to the operation try ~
Welcome to DDFE GITHUB: github.com/DDFE wechat official account: wechat search the official account “DDFE” or scan the qr code below
