As a running account of coupon development, this paper will introduce in detail the most basic layout design and animation design of coupon component development. Of course, because there is not enough KPI for articles at the end of the year, I hope those brothers who have the same problem can link to the article in the comments, and I will step on three links

Decomposition of demand

“There is a banner position in the coupon list. After receiving coupons, the coupon status will be updated, and then the coupon status will disappear. The coupon behind will be replaced with animation effect.”

It’s a classic demand. In fact, our work can be broken down into this:

  • Implement a coupon style
  • Coupon status updates after receiving coupons
  • Coupon replacement effect after receiving coupons
  • List data refresh after receiving coupons

In fact, as long as the problem is solved first, the development hours can be controlled, which is also a systematic solution to the uncertain estimation of the new engineers. After dismantling, I could control the time except for the uncertain replacement of special effects. The worst case was that I did not receive special effects, which would not affect the click rate of receiving coupons, because the animation happened after receiving coupons. You just have to suffer the user experience.

Implement a coupon style

Standard flex layout of three stages: information coupon logo | | to receive

<div class="flex align-center">
  <div class="flex center">
    logo
  </div>
  <div class="flex1">100 yuan</div>
  <div class="flex0">
    <div class="flex center">To receive</div>
  </div>
</div>
Copy the code

Coupon status updates after receiving coupons

Transition: all 0.3s ease-out; The width and height of the slow animation change at the same time because of the transition between buttons and ICONS. Transition-origin defaults to the middle, so there is no need to set it

List data refresh after receiving coupons

In the development process, we considered pulling the coupon list data again after receiving it to refresh the coupon view, but this would not only adjust the interface one more time, but also cause the view to refresh the flash. You should know that the user experience has been the pursuit of extreme animation, and this flash is impossible to tolerate.

If you want to flash early, you don’t want user experience

Since Vue is used, update the status of individual coupons, and then remember the current coupon item and index and set to the list of the entire coupon list

this.$set(list, index, { ... item });Copy the code

Coupon replacement effect after receiving coupons

It is possible that most developers will start with animation directly and set several key frames to complete the animation, but I don’t like to use this property, not because of any rendering performance problems, but simply because I am not good at using it, and even can’t remember the API, so EVERY time I use it, I have to Google, which I can’t stand.

For tween fill animations, transition from Width may work well, but it is important to control overflow properties in the animation container so that elements in the container do not squeeze out when width goes to 0

.coupon {
  transition: all 0.3 s ease-out;
  width: 50%;
  max-width: 50%;
  margin: 20 0 20 12;
  height: 120;
  opacity: 0;
  &.invisible {
    opacity: 0;
    width: 0;
    margin-right: 0; }}Copy the code

Let’s go through the process again

  1. Click on the coupon redemption
  2. Callback interface returns coupon result
  3. Update current coupon status according to coupon results
  4. Set the current coupon state vue. to the coupon list
  5. Coupon class changes triggered by status updates now have 0.3 seconds of animation
  6. Trigger gradient fill animation after the end of the coupon effect
  7. Splice out of the list after the gradient fill animation disappears
  8. Add a transparent mask to the entire operation area during animation execution to prevent repeated clicks

Here’s the actual effect

Write in the last

The author finally overcame inertia and wrote a running account, which was the most basic development thinking record. After writing it, I found that even one or two hours of work could not be completed without KPI. As the whole industry is trying to improve frameworks and low code, user experience without KPIs becomes irrelevant, which was the most important thing in the early days of my career. Finally, happy New Year and finish your homework