网站对公司的意义,杭州seo培训学校,郑州淘宝网站建设,广告毕业设计作品网站本文旨在实现类似点击按钮实现小球加入购物车效果。
使用技术#xff1a;
Vue2使用 Pubsub 监听按钮点击事件#xff08;如果不想用也可以自己改造下#xff09;监听 onmousemove 来获取按钮点击时的鼠标位置 小球组件#xff1a;
html css#xff1a;
小球父元素
Vue2使用 Pubsub 监听按钮点击事件如果不想用也可以自己改造下监听 onmousemove 来获取按钮点击时的鼠标位置 小球组件
html css
小球父元素定义了一些基本样式。采用 fixed 布局让小球相对浏览器窗口进行定位通过 opacity 控制显隐。
小球采用任意图片。
templatediv classball-wraprefball:style{opacity: ball.show,width: size px,height: size px,}i classel-icon-document /i/div
/templatestyle scoped
.ball-wrap {border-radius: 50%;z-index: 9999;position: fixed;top: 0;left: 0;display: flex;align-items: center;justify-content: center;background-color: #165BD3;
}
.el-icon-document {color: #fff !important;margin: 0 !important;
}
/stylejs
props控制小球大小、动画持续时间不传也有默认值
data通过 ball.show 来控制小球的 opacity
mounted:
小球当前位置通过变量 currentMousePos 来记录通过使用监听函数 onmousemove 修改当前鼠标位置。
小球挂载时增加监听 onmousemove使用 debounce 防抖函数保证 50ms 内只更新一次鼠标位置
核心方法 drop开启小球动画
exportRecordsListNav小球结束处的 dom 元素直接通过 id 获取了用 ref 还需要跨组件获取觉得有些麻烦
主要流程获取结束元素的位置 - 设置小球到初始位置 - 设置结束位置 - 动画结束后小球隐藏、清除 transition 属性
scriptimport debounce from lodash/debounce// 记录小球当前位置、通过监听 onmousemove 来更新小球位置const currentMousePos {x: 0,y: 0}export default {props: {// 球的大小size: {type: Number,default: 30},//持续时间duration: {type: Number,default: 1000},},data() {return {ball: {show: 0,},};},mounted() {// 初始化小球控制小球显隐this.initBall()// 小球挂载时监听 onmousemove使用 debounce 保证 50ms 内只更新一次小球位置window.addEventListener(mousemove, debounce((e) {currentMousePos.x e.clientXcurrentMousePos.y e.clientY}, 50))},methods: {initBall(){this.ball.show 0},// 外部调用方法开始执行动画drop(){// 获取结束位置的元素及坐标const exportRecordsListNav document.getElementById(export-records-list)const endPos {}endPos.x exportRecordsListNav.getBoundingClientRect().leftendPos.y exportRecordsListNav.getBoundingClientRect().top// 小球显示this.ball.show 1// 设置小球初始位置this.$refs.ball.style.transform translate(${currentMousePos.x}px, ${currentMousePos.y}px)// 延时是为了防止合并移动setTimeout(() {// 增加动画效果this.$refs.ball.style.transition transform ${this.duration}ms ease-in-out// 设置小球结束位置this.$refs.ball.style.transform translate(${endPos.x}px, ${endPos.y}px)// 动画结束后小球隐藏清除动画效果// 清除动画效果是为了下次小球从 (0,0) 移动到初始位置时不需要有动画setTimeout((){this.ball.show 0this.$refs.ball.style.transition unset}, this.duration)}, 100)},}}/script使用方式
我将结束元素和小球封装成了一个组件原因是认为工作项目中小球动画只和该导航栏相关。
由于加入购物车的按钮会在很多不同的单页面 page 里因此使用 Pubsub 技术告诉结束元素此刻点击了按钮再由结束元素组件调用 drop 方法这样在其他页面只需进行发布订阅不需要关注其他操作。
结束元素组件
templatedivspan idexport-records-list购物车/spanMovableBall refmovableBallRef//div
/templatescript
import MovableBall from /components/movable-ball/index.vue
import Pubsub from pubsub-js
export default {data () {},components: {MovableBall,},mounted () {// 订阅消息、接受到消息后执行 moveBall 方法Pubsub.subscribe(add-to-card, this.moveBall)},methods: {moveBall() {if(this.$refs.movableBallRef) {// 开启小球动画this.$refs.movableBallRef.drop()}},},
}
/script点击「加入购物车按钮」的单页面
script
import Pubsub from pubsub-js
export default {methods: {// 点击按钮加入购物车addToCard() {// 发布消息Pubsub.publish(add-to-card) }}
}
/script参考文档 仿加入购物车飞入动画效果
