Vue transition实现点赞动画效果的示例
作者：七分小熊猫
效果一览
爱心效果
材料：爱心图标两个，没有我这种 icon 组件的用 png 图片代替
<transition :name=" isLike ? 'zoom' : '' " mode="out-in">
<!-- 爱心图标 -->
<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>
因为在点赞时有动画，取消点赞不要动画，所以 transition 的 name 属性需要根据 isLike 变量变化，当 isLike 为 true 时，给他 zoom 动画，否则不给动画。动画模式是 out-in 即先出后进。原来的图标先从大变小，然后新图标再从小变大。
这里注意当两个切换的组件名称一致时，需要加 key 属性，以区分两个组件，否则动画不会生效
接下来写 css
/** 动画进行时的class **/
.zoom-enter-active, .zoom-leave-active {
transition: 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 旁边的曲线小图标
拖动拉杆就可以调整曲线
在动画快结尾的时候，使曲线超出结束点即可。
然后复制曲线面板下面的值 cubic-bezier(0.25, 0.1, 0.27, 1.32) 即可。
更多关于动画时间曲线的知识，这里就不赘述了，网上有很多相关知识。
关于缩放部分，按照上述 css 设定以及 mode="out-in" 动画模式是先出后进，在点赞时。
- 原来的爱心开始离场，此时原来爱心缩放状态为 1，即大小的 100%
- 爱心离场动画进行中，此时开始从 1 缩放到 0，即大小的 0%
- 原爱心离场完成，新爱心开始进场，此时新爱心缩放状态为 0
- 新爱心进场动画进行中，此时开始从 0 动画缩放到结束状态 1
当取消点赞的时候，isLike 为 false，transition 的 name 就等于空字符串，此时就不会有动画了。
数字滚动动画
因为只是数字的变化，因此 transition 里只需要一个 div 即可。只是要注意 div 设置 key，以标识数据变动。
<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;
}
}
需要注意我们为了好计算上下滚动的距离，所以需要把数字的高度定死在 17px，接下来写 transition 的动画 class。我们通过点赞状态来判断应该用那一套动画，点赞时 transition 的 name 是 plus ，取消点赞时是 minus 。
// 点赞数字+1动画
.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);
}
// 点赞数字-1动画
.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);
}
点赞动画
点赞动画很简单，在点赞时会在老的数字div下面生成一个新数字div。此时只需要让他们都往上移动 17px 即可。
因为取消点赞是数字从上往下滚动，所以需要让数字 1 的初始位置在 2 上面。所以写出如下代码，设定数字 1 的动画初始位置
.minus-enter {
transform: translateY(-34px);
}
为什么是 -34px ？因为数字div的高度是 17px 往上移 17px 会和 2 重叠，那么数字 1 再往上移动 17px 就会出现在 2 的上面。-17-17 = 34 这一切都发生在电光火石之间。
接下来在 .minus-enter-to 中位移到 -17px 就可以实现 1 往下滚动到 2 这个效果了。
数字 2 的离场动画就简单多了 直接从 0 到 17px 就可以滚出去了。
至此整个点赞效果就完成了
以上就是Vue transition实现点赞动画效果的示例的详细内容，更多关于vue transition实现点赞效果的资料请关注脚本之家其它相关文章！