效果展示:

一:html结构

<div id="buyButton" class="btn-buy">
<button onclick="cartAdd(this,'/',1,'/shopping.html');" class="buy">立即购买</button>
<button onclick="cartAdd(this,'/',0,'/cart.html');" class="add" ref="addToShopCartRef" @click="addToShopCart">加入购物车</button>
</div>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
<div class="animateImg" v-if="isShowImg" ref="animateImgRef">
<img width="100%" height="100%" :src="goods.imglist[0].thumb_path" alt="">
</div>
</transition>

二:css样式

<style scoped>
.animateImg {
height: 40px;
width: 40px;
position: absolute;
top: 20px;
left: 20px;
transition: all 1s;
}
</style>

三:js部分

<script>
export default {
data() {
return {
addToShopCartRefOffset: null, //获取加入购物车的偏移量
shopCartOffset: null,
isShowImg: false
};
}, mounted() {
setTimeout(() => {
this.addToShopCartRefOffset = $(this.$refs.addToShopCartRef).offset();
this.shopCartOffset = $("#shopCartId").offset();
}, 200);
}, methods: {
// 加入购物车
addToShopCart() {
this.isShowImg = true;
// 准备好载荷
const goods = {
goodsId: this.$route.params.goodsId,
count: this.goodsCount
};
// 调用Vuex的mutations方法
this.store.commit("addGoods", goods);
},
// 动画相关,进入前的动画
beforeEnter(el) {
// 设置动画的起始位置
el.style.left = `${this.addToShopCartRefOffset.left}px`;
el.style.top = `${this.addToShopCartRefOffset.top}px`;
el.style.transform = "scale(2)"
},
enter(el, done) {
//刷新动画帧
el.offsetWidth;
el.style.transform = "scale(0.5)"; //设置进入阶段结束的位置
el.style.left = `${this.shopCartOffset.left}px`;
el.style.top = `${this.shopCartOffset.top}px`;
// ...
done();
},
afterEnter(el) {
this.isShowImg = false;
}
}
};
</script>

过渡&动画的官方文档:

https://vuejs.bootcss.com/v2/guide/transitions.html

写得不好,但是还是要去吃饭的

vue中做出购物车的功能的更多相关文章

  1. react 实现类似vue中的<keep-alive>的功能,并解决antd-mobile切换回来时的空白

    在移动端的spa页面中,只要使用到了路由就很有必要使用到状态保存的功能,这样才能保证在页面进行切换的时候,让用户可以看到刚才滑动的地方,让用户的体验更加友好.这儿我找到了react-router-ca ...

  2. vue中实现全选功能

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue ...

  3. vue中使用导出表格功能

    1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...

  4. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  5. vue中使用cookie记住用户上次选择(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了, ...

  6. 通俗易懂了解Vue中nextTick的内部实现原理

    1. 前言 nextTick 是 Vue 中的一个核心功能,在 Vue 内部实现中也经常用到 nextTick.在介绍 nextTick 实现原理之前,我们有必要先了解一下这个东西到底是什么,为什么要 ...

  7. 在vue中如何实现购物车checkbox的三级联动

    最近用vue写一个电商项目,自然就少不了要写一个购物车的相关页面,功能完整的购物车的checkbox应该是三级联动的,1级checkbox是选中购物车中所有的商品,2级checkbox是选中某个店铺下 ...

  8. 用Vue来实现购物车功能(二)

    这个小demo具有添加商品进购物车 .增加购物车内商品的数量.减少购物车内商品的数量.计算一类商品的总价.以及计算所有商品的总价 首先看目录结构 因为我们的Tab.vue  Car.vue 以及Car ...

  9. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

随机推荐

  1. 加州小学grade1,学习计划

    Visual vocabulary Grammar Spelling Maths Chapter 1 Patterns and Number SenseChapter 2Understanding A ...

  2. 大数据初级笔记二:Hadoop入门之Hadoop集群搭建

    Hadoop集群搭建 把环境全部准备好,包括编程环境. JDK安装 版本要求: 强烈建议使用64位的JDK版本,这样的优势在于JVM的能够访问到的最大内存就不受限制,基于后期可能会学习到Spark技术 ...

  3. HDU 4405 Aeroplane chess:期望dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4405 题意: 你在下简化版飞行棋... 棋盘为一个线段,长度为n. 上面有m对传送门,可以直接将你从a ...

  4. utf8_general_ci和utf8_unicode_ci的比较

    看到很多数据库的设计对于中文字符都是选择选用utf8_general_ci而非utf8_unicode_ci utf8_general_ci和utf8_unicode_ci的区别并不大:utf8_un ...

  5. animate旋转动画练习,css3形变练习

    <!DOCTYPE html> <!-- saved from url=(0048)http://yinjiazeng.github.io/test/dial/index.html ...

  6. html5--2.10综合实例2-移动端页面练习

    html5--2.10综合实例2-移动端页面练习 学习要点 通过一个简单的移动手机页面,复习学过的内容 手机网页的测试 手机布局的屏幕设定 手机网页的测试方法 直接在手机上测试,比较麻烦,效果好 电脑 ...

  7. mvc 让伪静态变得简单

    IIS 部署后访问*.* config 配置: <modules runAllManagedModulesForAllRequests="true">      < ...

  8. codeforces 569A A. Music(水题)

    题目链接: A. Music time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  9. ambari 维护模式及reset API 操作

    Ambari 的维护模式(Maintenance Mode)介绍 Ambari 提供的 Maintenance Mode,是为了让用户在调试或者维护 Service 的时候,抑制不必要的告警(Aler ...

  10. 【Lintcode】062.Search in Rotated Sorted Array

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7  ...