vue小球动画
Posted uniapp1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue小球动画相关的知识，希望对你有一定的参考价值。
beforeEnter: function(el) {
// 通过绝对定位，小球css的top和left值一直都是固定的
//不管怎么滚动，小球的x y坐标固定
el.style.transform = "translate(0,0)";
},
enter: function(el, done) {
//小球x y的移动距离要用终点-起点
el.offsetLeft;
let s = document
.querySelector(".mui-input-numbox")
.getBoundingClientRect();
let f = document.querySelector(".mui-badge").getBoundingClientRect();
let x = f.left - s.left;
let y = f.top - s.top;
el.style.transform = "translate(" + x + "px," + y + "px)";
el.style.transition = "all 1s cubic-bezier(.37,-0.3,1,.28)";
done();
},
afterEnter: function(el) {
this.flag = !this.flag;
},
以上是关于vue小球动画的主要内容，如果未能解决你的问题，请参考以下文章