vue实现购物车动画功能
秦晋
（重要）介绍一个vue项目给大家学习，阅读别人的项目可以快速提高自己哦， 移动端vue完整项目
1，这里用到了jq及基于jq的插件，插件非常的小，好像只有数kb，不用担心太多代码，不多说直接上代码，
使用前需要初始化，在mounted或者created方法里调用 this.init()
init:function(){
(function ($) {
$.fly = function (element, options) {
// 默认值
var defaults = {
version: '1.0.0',
autoPlay: true,
vertex_Rtop: 10, // 默认顶点高度top值
speed: 1.2,
start: {}, // top, left, width, height
end: {},
onEnd: $.noop
};
var self = this,
$element = $(element);
/**
* 初始化组件，new的时候即调用
*/
self.init = function (options) {
this.setOptions(options);
!!this.settings.autoPlay && this.play();
};
/**
* 设置组件参数
*/
self.setOptions = function (options) {
this.settings = $.extend(true, {}, defaults, options);
var settings = this.settings,
start = settings.start,
end = settings.end;
$element.css({marginTop: '0px', marginLeft: '0px', position: 'fixed'}).appendTo('body');
// 运动过程中有改变大小
if (end.width != null && end.height != null) {
$.extend(true, start, {
width: $element.width(),
height: $element.height()
});
}
// 运动轨迹最高点top值
var vertex_top = Math.min(start.top, end.top) - Math.abs(start.left - end.left) / 3;
if (vertex_top < settings.vertex_Rtop) {
// 可能出现起点或者终点就是运动曲线顶点的情况
vertex_top = Math.min(settings.vertex_Rtop, Math.min(start.top, end.top));
}
/**
* ======================================================
* 运动轨迹在页面中的top值可以抽象成函数 y = a * x*x + b;
* a = curvature
* b = vertex_top
* ======================================================
*/
var distance = Math.sqrt(Math.pow(start.top - end.top, 2) + Math.pow(start.left - end.left, 2)),
// 元素移动次数
steps = Math.ceil(Math.min(Math.max(Math.log(distance) / 0.05 - 75, 30), 100) / settings.speed),
ratio = start.top == vertex_top ? 0 : -Math.sqrt((end.top - vertex_top) / (start.top - vertex_top)),
vertex_left = (ratio * start.left - end.left) / (ratio - 1),
// 特殊情况，出现顶点left==终点left，将曲率设置为0，做直线运动。
curvature = end.left == vertex_left ? 0 : (end.top - vertex_top) / Math.pow(end.left - vertex_left, 2);
$.extend(true, settings, {
count: -1, // 每次重置为-1
steps: steps,
vertex_left: vertex_left,
vertex_top: vertex_top,
curvature: curvature
});
};
/**
* 开始运动，可自己调用
*/
self.play = function () {
this.move();
};
/**
* 按step运动
*/
self.move = function () {
var settings = this.settings,
start = settings.start,
count = settings.count,
steps = settings.steps,
end = settings.end;
// 计算left top值
var left = start.left + (end.left - start.left) * count / steps,
top = settings.curvature == 0 ? start.top + (end.top - start.top) * count / steps : settings.curvature * Math.pow(left - settings.vertex_left, 2) + settings.vertex_top;
// 运动过程中有改变大小
if (end.width != null && end.height != null) {
var i = steps / 2,
width = end.width - (end.width - start.width) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2),
height = end.height - (end.height - start.height) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2);
$element.css({width: width + "px", height: height + "px", "font-size": Math.min(width, height) + "px"});
}
$element.css({
left: left + "px",
top: top + "px"
});
settings.count++;
// 定时任务
var time = window.requestAnimationFrame($.proxy(this.move, this));
if (count == steps) {
window.cancelAnimationFrame(time);
// fire callback
settings.onEnd.apply(this);
}
};
/**
* 销毁
*/
self.destroy = function(){
$element.remove();
};
self.init(options);
};
// add the plugin to the jQuery.fn object
$.fn.fly = function (options) {
return this.each(function () {
if (undefined == $(this).data('fly')) {
$(this).data('fly', new $.fly(this, options));
}
});
};
})(jQuery);
// 兼容ie
(function () {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame){
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
}());
} // 设置滚动球，加入购物车动画
// 添加购物车
add_cart:function(commondity_id){
if(this.cart_switch){
this.cart_switch = false
var offset=$('#end').offset();
$(window).resize(site);
function site() {
offset=$('#end').offset();
}
var addcar=$(this);
var flyer=$('<p class="cir"></p>');
flyer.fly({
start:{
left:event.pageX,
top:event.pageY
},
end:{
left:offset.left+this.cirWidth,
top:offset.top,
width:0,
height:0
}
})
this.$http({
method:'get',
url:'add_cart.php',
params:{
user_id:getData().user_id,
commodity_id:commondity_id,
img_url:'test',
shop_name:'test',
title:'test'
}
}).then((res)=>{
this.cart_switch = true
console.log('res = '+res.data)
},(err)=>{
console.log('err = '+err)
})
}else{
this.openNotify()
}
},
openNotify() {
this.$dialog.notify({
mes: '你的操作过于频繁，请稍后再试！',
timeout: 5000,
callback: () => {
// 回调
}
});
}3，小球投到购物车图标之后，加一些动画体验会更好哦，如下：
（1）在css里加入
0% { transform: scale(1) }
25% { transform: scale(.8) }
50% { transform: scale(1.1) }
75% { transform: scale(.9) }
100% { transform: scale(1) }
}
@-moz-keyframes mymove{
0% { transform: scale(1) }
25% { transform: scale(.8) }
50% { transform: scale(1.1) }
75% { transform: scale(.9) }
100% { transform: scale(1) }
}
@-webkit-keyframes mymove{
0% { transform: scale(1) }
25% { transform: scale(.8) }
50% { transform: scale(1.1) }
75% { transform: scale(.9) }
100% { transform: scale(1) }
}
@-o-keyframes mymove{
0% { transform: scale(1) }
25% { transform: scale(.8) }
50% { transform: scale(1.1) }
75% { transform: scale(.9) }
100% { transform: scale(1) }
}.move{animation: mymove .5s ease-in-out;}
（2）使用方式：(通过控制this.move的boolean值，来达到一张一弛的效果)
<p :class="{move:move}"></p>
我是在请求成功后把this.move的值设置为true，然后500毫秒再设置为false
setTimeout(()=>{
this.move = false
},500)
类似资料：