amibug/fly

Add to cart - animation effect Demo

fly's Issues

弹出的图片建议在动画结束后销毁掉

玩多了就卡了～

想计算出物体运动的时间，但是还没有思路，请指教？？？

请问在一个单独的函数中怎么写onEnd

function saveShopping(id,name) {

    }

onEnd无法识别

destory这个销毁单词拼错了，应该是destroy

如题

js有冲突用不了

打开链接的例子：https://codepen.io/hzxs1990225/pen/ogLaVp，点击加入购物车里面错误pen.js:6 Uncaught TypeError: flyer.fly is not a function

在手机web页面中：top值问题

如果商品很多，页面可以滚动，当商品开始时的top值高度大于屏幕的高度，加入购物车时，top值会比商品在屏幕中显示的位置低，请问如何解决？谢谢

debug

destroy方法 未定义

VM4079:17 Uncaught TypeError: flyer.destroy is not a function

当窗口大小改变时，页面高度大于一屏时，飞动效果定位就不准确了，如何解决

is bug？

today we find our project not work,and the github`s demo is bad ,is auther still service

拖动垂直滚动条，小人落点不一致。在 CodePen 是这样的

Chrome 浏览器下

能解释下这段代码原理和作用么？

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),

特别是这里的steps

加入购物车时页面会自动滚到顶部

如题，不知道该怎么解决
我的代码

$(".addcar").click(function(event){ 
 	var offset = $("#end").offset(); 
     var addcar = $(this); 
     var img = addcar.parent().find('img').attr('src'); 
     var flyer = $('<img class="u-flyer" src="'+img+'">'); 
     $ (window).unbind ('scroll');
     flyer.fly({ 
         start: { 
             left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed 
             top: event.pageY //开始位置（必填） 
         }, 
         end: { 
             left: offset.left+10, //结束位置（必填） 
             top: offset.top+10, //结束位置（必填） 
             width: 0, //结束时宽度 
             height: 0 //结束时高度 
         }, 
         onEnd: function(){ //结束回调 
             $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 
 			
         } 
     }); 
 }); 

乱点出一个bug

readme中的demo：

一直点购物车点的下面，结果成这样了。

在zepto里面用不了 需要怎么改

在zepto里面用不了 需要怎么改，移动端用jquery太大了

手机上加入购物车然后滑动页面，动画会卡顿，直到滑动停止。

解决Demo中一个BUG，图标错乱，不知道算不算BUG。

bug问题：当有滚动条的时候，飞车进入购物车。不是购物车图标的位置。
原因：貌似源代码没有考虑滚动条的情况吧，当有滚定条的时候，需要#end的顶部距离减去滚动条的距离。这样有滚动条的时候，商品也能飞入到右侧的购物车的位置。

解决方案：

$('html,body').on('click', addProduct);
function addProduct(event){
var offset = $("#end").offset(),
var scrollX=$(window).scrollTop(); //获取滚动条的距离。
flyer = $('');
if(scrollX==0) //判断滚动条的距离变化，如果没有变化
{
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left,
top: offset.top,
width: 20,height: 20
}
});
}
else
{
flyer.fly({
start: {
left: event.pageX,
top: event.pageY-scrollX //这里也要，当有滚动条的时候，点击的时候，img飞出的起始位置不是点击的位置。
},
end: {
left: offset.left,
top: offset.top-scrollX, //#end 的顶部距离减去滚动条的距离
width: 20,height: 20
}
});
}
}

这个是js冲突吗？

没动画效果

已解决 我自己的位置坐标没值导致

微信浏览器不兼容

在微信浏览器中使用，会报错 Uncaught TypeError: flyer.fly is not a function