Example of Vue transition to achieve like animation effect

Results at a Glance

Heart Effect

Materials: Two heart icons. If there is no icon component like mine, use a png picture instead.

<transition :name=" isLike ? 'zoom' : '' " mode="out-in">
    <!-- Heart Icon-->
    <icon data="@icon/like.svg" color="#FF0000" v-if="isLike" key="like"></icon>
    <icon data="@icon/unlike.svg" color="#333333" v-else key="unlike"></icon>
</transition>

Because there is animation when you like a button, and no animation when you cancel a like button, the name attribute of transition needs to change according to the isLike variable. When isLike is true , give it a zoom animation, otherwise no animation. The animation mode is out-in, which means first out, last in. The original icon changes from large to small, and then the new icon changes from small to large.

Note that when the names of the two switching components are the same, you need to add the key attribute to distinguish the two components, otherwise the animation will not take effect.

Next, write CSS

/** The class of the animation in progress **/
.zoom-enter-active, .zoom-leave-active {
    transition: all .15s cubic-bezier(0.42, 0, 0.34, 1.55);
}

/** Set the entry start state and exit end state, both are scaled to 0 **/
.zoom-enter, .zoom-leave-to {
    transform: scale(0);
}

/** Set the entry end status and exit start status, both are scaled to 1 **/
.zoom-enter-to, .zoom-leave {
    transform: scale(1);
}

According to the official documentation, .name-enter-active and .name-leave-active will be set to the class of the icon component during the animation, so here we set the animation properties, time and curve of the transition.

Because we need to make the image slightly larger than scale(1) when zooming in and then return to normal size, we need to customize the animation curve cubic-bezier(0.42, 0, 0.34, 1.55) . How did this curve come about?

Open the Chrome debug panel, find a DOM and set transition-timing-function: ease; then click the small curve icon next to ease

Drag the pull bar to adjust the curve

At the end of the animation, just make the curve extend beyond the end point.

Then copy the value cubic-bezier(0.25, 0.1, 0.27, 1.32) below the curve panel.

I won’t go into more details about animation time curves here, as there is a lot of relevant knowledge on the Internet.

Regarding the zoom part, according to the above css settings and mode="out-in" the animation mode is first out and then in when clicking on the like button.

1. The original love begins to leave the scene. At this time, the original love scale is 1, which is 100% of the size.
2. The heart is leaving the scene. It starts to scale from 1 to 0, which is 0% of the size.
3. The original love has left the stage, and the new love begins to enter the stage. At this time, the scale status of the new love is 0
4. The new heart is entering the scene. The animation starts from 0 and scales to the end state 1.
   

When you cancel a like, isLike is false , the name of the transition is equal to an empty string, and there will be no animation.

Digital scrolling animation

Because it is just a change in numbers, only one div is needed in the transition. Just pay attention to setting the key of the div to indicate the data change.

<div class="like-num-wrapper">
    <transition :name="item.is_like ? 'plus' : 'minus'">
        <div
                class="like-num"
                :style="{color: item['is_like'] ? 'red': '#333'}"
                :key="item['like_num']"
        >
            {{item['like_num']}}
        </div>
    </transition>
</div>

  .like-num-wrapper {
    position: relative;
    margin-left: 16px;
    text-align: end;
    font-size: 13px;
    height: 17px;
    overflow-y: hidden;

    .like-num {
      top: 0;
      left: 0;
      position: relative;
      line-height: 17px;
    }
  }

Note that in order to calculate the scrolling distance up and down, we need to set the height of the number to 17px . Next, write the transition animation class. We use the like status to determine which animation to use. The name of the transition is plus when a like is clicked, and minus when a like is canceled.

// Like number +1 animation.plus-enter-active, .plus-leave-active {
  transition: all .3s ease-in;
}

.plus-enter, .plus-leave {
  transform: translateY(0);
}

.plus-enter-to, .plus-leave-to {
  transform: translateY(-17px);
}

// Like number -1 animation.minus-enter-active, .minus-leave-active {
  transition: all .3s ease-in;
}

.minus-enter {
  transform: translateY(-34px);
}

.minus-enter-to {
  transform: translateY(-17px);
}

.minus-leave {
  transform: translateY(0);
}

.minus-leave-to {
  transform: translateY(17px);
}

Like animation

The like animation is very simple. When you click the like button, a new digital div will be generated under the old digital div. At this point, just move them all up 17px.

Because canceling a like causes the numbers to scroll from top to bottom, the initial position of number 1 needs to be above 2. So write the following code to set the initial position of the animation of number 1

.minus-enter {
  transform: translateY(-34px);
}

Why -34px? Because the height of the digital div is 17px, if it moves up 17px it will overlap with 2, then if the number 1 moves up another 17px it will appear above 2. -17-17 = 34 all happened in a flash.

Next, by shifting to -17px in .minus-enter-to , you can achieve the effect of scrolling from 1 to 2.

The exit animation of number 2 is much simpler. It can just roll out from 0 to 17px.

At this point, the whole like effect is completed

The above is the details of the example of using Vue transition to achieve the like animation effect. For more information about how to use Vue transition to achieve the like effect, please pay attention to other related articles on 123WORDPRESS.COM!