模拟加入购物车的特效（Vue）

点击加入购物车，会弹出一个紫色小球掉入购物车

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><script src="Vue.min.js"></script><style>.ball {width: 15px;height: 15px;border-radius: 50%;background-color: blueviolet;}p {position: absolute;top: 455px;left: 100px;}</style>
</head><body><div id="app"><input type="button" value="加入购物车" @click="flag=!flag"><transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"><div class="ball" v-show="flag"></div></transition><p>假装这里有一个购物车</p></div><script>var vm = new Vue({el: '#app',data: {flag: false},methods: {beforeEnter(el) {el.style.transform = "translate(0,0)" //小球初始位置},enter(el, done) {el.offsetWidth //动画过渡el.style.transform = "translate(150px,450px)" //最终位置el.style.transition = 'all 2s ease' //所花时间done()},afterEnter(el) {this.flag = !this.flag}}})</script></body></html>

模拟加入购物车的特效（Vue）相关推荐

Java 代码简单模拟商城购物车
纯Java代码模拟简单购物车功能 1.Product类 import java.util.Objects;public class Product implements Comparable{priv ...
html购物车效果,模拟加入购物车效果
html> 模拟加入购物车效果 * {margin: 0px auto;padding: 0px;} .top {width: 402px;height: 35px;line-height: 3 ...
mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成: ...
html加入购物车的动画,vue实现加入购物车动画
预备基础整体思路定义商品列表,设置点击的元素(点击后触发加入购物车的函数addToShopCart)注:这里要把$event传递过去,方便得到target 定义一个component用来放购物车和 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
VUE购物车小案例—vue指令的综合应用
需求: 运用Vue基础指令知识实现小小购物车: 涉及到的指令有:v-for.v-model .v-on.v-text 1.能够显示商品名,价格,以及当前商品在购物车的数量 2. 点击加+ 减- 可 ...
在vuepress博客添加樱花特效(vue樱花组件源码)
文章目录写在前面樱花的源码在vuepress使用写在前面写过博客的同学都知道,飘落樱花是一个比较常见的博客特效. 平时都是用插件来实现的,有想过去了解它到底是怎么实现的吗? 它是用canva ...
纯css3模拟龙卷风动画js特效
下载地址纯css3代码实现的龙卷风特效,css模拟龙卷风动画代码. dd:
烟花晚霞星空特效-vue
效果图: 烟花晚霞星空效果图-vue: 源代码: <template><div class="body"><div class="stars ...

模拟加入购物车的特效（Vue）

模拟加入购物车的特效（Vue）相关推荐

最新文章

热门文章