--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- ## 效果一览 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f7f1a65991b4eb6805578049b8e6a9c~tplv-k3u1fbpfcp-watermark.image) 点赞时爱心缩小变大，变大时略微大一点再变正常。取消点赞时爱心无动画同时数字滚动。+1 时向上滚动，-1 时向下滚动。 ## 爱心效果材料：爱心图标两个，没有我这种 icon 组件的用 png 图片代替 ``` html ``` 因为在点赞时有动画，取消点赞不要动画，所以 transition 的 name 属性需要根据 isLike 变量变化，当 `isLike` 为 `true` 时，给他 **zoom** 动画，否则不给动画。动画模式是 `out-in` 即先出后进。原来的图标先从大变小，然后新图标再从小变大。这里注意当两个切换的组件名称一致时，需要加 key 属性，以区分两个组件，否则动画不会生效接下来写 css ``` 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); } ``` 根据[官方文档](https://cn.vuejs.org/v2/guide/transitions.html#%E5%8D%95%E5%85%83%E7%B4%A0-%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E6%B8%A1)描述，.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 旁边的曲线小图标 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed630b20aa7f41be80973419cf1300ef~tplv-k3u1fbpfcp-watermark.image) 拖动拉杆就可以调整曲线 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7862b2ff3e04d39a0ff4312e1936d0d~tplv-k3u1fbpfcp-watermark.image) 在动画快结尾的时候，使曲线超出结束点即可。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9dd7ab0b7ed43b78428b3a4efdb9ccf~tplv-k3u1fbpfcp-watermark.image) 然后复制曲线面板下面的值 `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，以标识数据变动。 ``` html

``` ``` css .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` 。 ``` css // 点赞数字+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 即可。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d716adc4f8240c6acf99a5e1e921470~tplv-k3u1fbpfcp-watermark.image) 看起来大概就是这样。1 和 2 都在 `.like-num-wrapper` div 下，而这个 div 我们设置了`overflow-y: hidden` css 属性，所以 2 此时是被隐藏的。让 1 和 2 这两个 div 都往上移动 17px 即可。 ### 取消点赞动画当点击取消点赞时，情形跟点赞一样，只是需要对 2 和 1 做不同的位移。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68e4964bec1d423f8e029fbbc5556153~tplv-k3u1fbpfcp-watermark.image) 因为取消点赞是数字从上往下滚动，所以需要让数字 1 的初始位置在 2 上面。所以写出如下代码，设定数字 1 的动画初始位置 ``` css .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 就可以滚出去了。至此整个点赞效果就完成了，欢迎点赞我的这篇文章👏🏻