Vue动画+Velocity.js实现购物车小球

最新推荐文章于 2023-02-16 18:51:52 发布

Me_禹城人

最新推荐文章于 2023-02-16 18:51:52 发布

阅读量203

点赞数

分类专栏： Vue 文章标签： html5 css3 vue.js

本文链接：https://blog.csdn.net/weixin_41993254/article/details/107760968

版权

在商城app开发中，遇到购物车小球动画的难题，原有教程使用Vue动画钩子和浏览器重绘实现，但效果不理想。通过深入研究Vue官方文档，决定结合Velocity.js来创建动画过渡效果。避免了依赖浏览器重绘，确保了页面中其他组件动画的正常运行。以下是使用Vue动画钩子和Velocity.js的代码实现。

摘要由CSDN通过智能技术生成

前情提要

在实现商城app的时候遇到了小球动画这个坎，跟着教程走行不通，教程是用Vue动画的钩子函数实现的是半场动画，谷歌搜出的商场小球动画都是同一个教程的结果，其中都是用了 el.offsetWeight 浏览器重绘，才会出现小球的过渡效果，可惜我的并不行，然后自以为轻视动画的我也就cope了一下别人的代码随便改改，没想到这是一个巨坑一改就是一天，后来没办法只能冷静下来好好研究Vue的官方文档，同样是用了Vue动画的钩子函数然后结合Velocity.js来实现，至于为什么要用Velocity.js，是因为官方文档也是在钩子函数处使用Velocity.js才实现钩子函数处的动画过渡效果，且并没有提到el.offsetWeight` 浏览器重绘我想这可能是bug,就算用了浏览器重绘那么以后同一页面中其它组件的动画效果怎么办呢也重绘吗，我想让浏览器重绘这并不是什么好的办法
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="F:\VB_2019\work\vue\work\vue.js"></script>
<script src