Vue transition实现点赞动画效果的示例

效果一览

Vue transition实现点赞动画效果的示例

爱心效果

材料:爱心图标两个,没有我这种 icon 组件的用 png 图片代替

<transition :name=" isLike ? 'zoom' : '' " mode="out-in">
    <!-- 爱心图标 -->
    <icon data="http://www.cppcns.com/wangluo/javascript/@icon/like.svg" color="#FF0000" v-if="isLike" key="like"></icon>
    <icon data="http://www.cppcns.com/wangluo/javascript/@icon/unlike.svg" color="#333333" v-else key="unlike"></icon>
</transit编程客栈ion>

因为在点赞时有动画,取消点赞不要动画,所以 transition 的 name 属性需要根据 isLike 变量变化,当 isLiketrue 时,给他 zoom 动画,否则不给动画。动画模式是 out-in 即先出后进。原来的图标先从大变小,然后新图标再从小变大。

这里注意当两个切换的组件名称一致时,需要加 key 属性,以区分两个组件,否则动画不会生效

接下来写 css

/** 动画进行时的class **/
.zoom-enter-active, .zoom-leave-active {
    transitDHvuBTBCPLion: all .15s cubic-bezier(0.42, 0, 0.34, 1.55);
}

/** 设置进场开始的状态和离场结束的状态,都是缩放到0 **/
.zoom-enter, .zoom-leave-to {
    transform: scale(0);
}

/** 设置进场结束的状态和离场开始的状态, 都是缩放到1 **/
.zoom-enter-to, .zoom-leave {
    transform: scale(1);
}

根据官方文档描述,.name-enter-active 和 .name-leave-active 会在动画进行时设置到 icon 组件的 class 中,所以这里我们设置 transition 的动画属性,时间以及曲线。

因为我们需要在放大时略微比 scale(1) 要大一点再回到正常大小,所以要自定义动画曲线 cubic-bezier(0.42, 0, 0.34, 1.55) 。这个曲线怎么来的呢?

打开 chrome 的调试面板,随便找个 dom 设置 transition-timing-function: ease; 然后点击 ease 旁边的曲线小图标

Vue transition实现点赞动画效果的示例

拖动拉杆就可以调整曲线

Vue transition实现点赞动画效果的示例

在动画快结尾的时候,使曲线超出结束点即可。

Vue transition实现点赞动画效果的示例

然后复制曲线面板下面的值 cubic-bezier(0.25, 0.1, 0.27, 1.32) 即可。

更多关于动画时间曲线的知识,这里就不赘述了,网上有很多相关知识。

关于缩放部分,按照上述 css 设定以及 mode="out-in" 动画模式是先出后进,在点赞时。

  1. 原来的爱心开始离场,此时原来爱心缩放状态为 1,即大小的 100%
  2. 爱心离场动画进行中,此时开始从 1 缩放到 0,即大小的 0%
  3. 原爱心离场完成,新爱心开始进场,此时新爱心缩放状态为 0
  4. 新爱心进场动画进行中,此时开始从 0 动画缩放到结束状态 1

当取消点赞的时候,isLike 编程客栈false,transition 的 name 就等于空字符串,此时就不会有动画了。

数字滚动动画

因为只是数字的变化,因此 transition 里只需要一个 div 即可。只是要注意 div 设置 key,以标识数据变动。

<div class="like-num-wrapDHvuBTBCPLper">
    <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;
    }
  }

需要注意我们为了好计算上下滚动的距离,所以需要把数字的高度定死在 17px,接下来写 transition 的动画 class。我们通过点赞状态来判断应该用那一套动画,点赞时 transition 的 name 是

Vue transition实现点赞动画效果的示例

扫一扫手机访问