@keyframes mymove { 0% { transform: scale(1); } 25% { transform: scale(0.8); } 50% { transform: scale(0.6); } 75% { transform: scale(0.4); } 100% { transform: scale(0.2); } }
2.给商品缩略图添加 animation 并加入 keyframesimg { animation: 0.88s mymove ease-in-out; width: 3rem; height: 3rem; border-radius: 50%; }
好嘞,搞定!来个Gif图炫一哈✿✿ヽ(°▽°)ノ✿
为啥我觉得还是有点突兀呢,没办法,处女座,必须让他更完美:see_no_evil:
优化三:购物车加入商品后弹簧效果商品缩略小球逐渐变小的落入到购物车中,此时,购物车再来个弹簧效果就更美了,还是老办法用 css3 的 keyframes 再合适不过啦~
由于Tabbar是用的 Vant UI组件,在单独的 Dashboard.vue 文件中,所以在 Dashboard.vue 文件中给购物车这个图标设置 keyframes 值.
@keyframes carmove { 0% { transform: scale(1); } 25% { transform: scale(0.8); } 50% { transform: scale(1.1); } 75% { transform: scale(0.9); } 100% { transform: scale(1); } }
并且把这个 keyframes 值设置给购物车这个图标
.moveToCart { animation: mymove 0.5s ease-in-out; }
购物车的动画是加完了,但是如何控制小球移入到购物车后让动画生效呢?于是先找到小球动画结束的方法,通过查资料找到了 transitionend 和 webkitAnimationEnd 两个方法,于是我对他们做了监听,当小球消失的时候在这两个方法中动态的增加Tabbar底部购物车的 keyframes 值.
afterEnter (el) { // 监听小球动画结束方法 el.addEventListener('transitionend', () => { el.style.display = 'none'; this.listenInCart(); }) // 监听小球动画结束方法 el.addEventListener('webkitAnimationEnd', () => { el.style.display = 'none'; this.listenInCart(); }) },
this.listenInCart() 方法是控制底部Tabbar购物车图标动画的方法,我们已经定义了一个class moveToCart ,我采用取巧的办法,当动画结束的时候,给Tabbar的购物车添加class moveToCart ,然后让他在500ms后在移除这个class,这样就会保证每次增加购物车后,底部Tabbar都会执行 keyframs 动画.
listenInCart () { // 拿到底部Tabbar购物车的DOM元素添加class document.getElementById("buycar").classList.add('moveToCart'); setTimeout(() => { // 500毫秒后移除底部Tabbar购物车的DOM元素class document.getElementById("buycar").classList.remove('moveToCart'); }, 500); }
此时算是真正的大功告成:cherry_blossom:,来个Gif图炫耀一哈✿✿ヽ(°▽°)ノ✿
都看到这里啦,还不点赞支持下:smile:,鼓励下作者~ 三、重点来了:rocket::rocket:
我知道掘友们已经迫不及待的想看源码啦~当然本篇知识点只是整个项目的冰山一角,还有很多好用好玩的新技术,如 Better-scroll 滚动使用,高德地图的集成,图片瀑布流,移动端适配等等主流技术在这个项目中几乎都有~放个GitHub连接,掘友们可不要吝啬手中的小星星哦✿✿ヽ(°▽°)ノ✿
:tada:Vue构建大型单页面电商应用 开源啦!点我看源码:rocket::rocket:
总结
以上所述是小编给大家介绍的Vue实现商品飞入购物车效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: