Effect in

When you like it, it shrinks and becomes larger, and when it becomes larger, it becomes slightly larger and then becomes normal. There is no animation of love when you cancel the “like” button

While the numbers scroll. Scroll up at +1, scroll down at -1.

Effect of love

Material: Love icon two, I do not have such icon components with PNG images instead

<transition :name=" isLike ? 'zoom' : '' " mode="out-in">
    <! -- Love 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>
Copy the code

The transition name attribute needs to change according to the isLike variable. When isLike is true, it will animate the transition. Otherwise, it will not animate the Transition. The animation mode is out-in, which means first out, then in. The original icon goes from large to small, and then the new icon goes from small to large.

Note here that if the names of two switched components are the same, a key attribute is required to distinguish the two components; otherwise, the animation will not take effect

So let’s do CSS

/** class **/
.zoom-enter-active..zoom-leave-active {
    transition: all .15s cubic-bezier(0.42.0.0.34.1.55);
}

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

/** Sets the end of entry state and the start of exit state, both scaled to 1 **/
.zoom-enter-to..zoom-leave {
    transform: scale(1);
}
Copy the code

The.name-enter-active and.name-leave-active components are set to the icon component’s class during animation, so we set the transition animation properties, the time, and the curve.

Since we need to be slightly larger than scale(1) when enlarged and back to normal, we need to customize the cubic bezier curve (0.42, 0, 0.34, 1.55). Where did this curve come from?

Open chrome’s debug panel and select a DOM setting transition-timing-function: ease; Then click the little curve icon next to Ease

Drag the lever to adjust the curve

At the end of the animation, make the curve go beyond the end point.

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

More knowledge about animation time curves is not needed here, there are many related knowledge on the Internet.

For the zooming part, follow the CSS Settings above and the mode=” out-of-in “animation mode is first in, last in, when the likes are clicked.

  1. The original heart begins to leave the field, at this point the original heart scale state is 1, that is, 100% of the size
  2. The love departure animation is in progress. At this point, it starts to scale from 1 to 0, that is, 0% of the size
  3. When the original love leaves the field, the new love enters the field. At this time, the zoom status of the new love is 0
  4. The new love entry animation is in progress, and it starts zooming from 0 to end state 1

When you unlike, isLike is false, and the transition name is equal to the empty string, and there’s no animation.

Digital scroll animation

Because it’s just a number change, you only need a div in transition. Just note that div sets the key to indicate data changes.

<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>
Copy the code
  .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; }}Copy the code

Note that in order to calculate how far we scroll up and down, we need to set the height of the number at 17px, and then write the Transition animation class. We use our likes to determine which animations we should use. The transition name is plus when we like it and minus when we unlike it.

// Like the number +1animation.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); } // Thumbs up number -1animation.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);
}

Copy the code

Thumb up animation

The “like” animation is very simple. When a “like” is clicked, a new numeric div is created under the old numeric div. All you need to do is move them all up 17px.

It looks something like this. Both 1 and 2 are under the.like-num-wrapper div, and for this div we set overflow-y: hidden CSS property, so 2 is hidden. Move both divs 1 and 2 up 17px.

Cancel the thumbs-up animation

When unlike is clicked, the situation is the same as liking, but with different shifts for 2 and 1.

Since unlikes scroll down from the top, the initial position of the number 1 needs to be above the number 2. So write the following code to set the initial animation position of the number 1

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

Why -34px? Since the height of the number div is 17px and moving 17px up will overlap with the 2, moving the number 1 another 17px up will appear on top of the 2. -17-17 = 34 It all happened in a flash.

Then in.minus-enter-to, shift to -17px to scroll 1 down to 2.

The exit animation for the number 2 is much easier and just rolls out from 0 to 17px.

At this point the whole like effect is complete, welcome to like my article 👏🏻