您现在的位置是:网站首页>前端技术>VueVue

VUE 实现加入购物车抛物线动画

神夜2019-09-04 08:39:33Vue1422人已围观文章来源:PHP中文网

简介

import $ from 'jquery'
$.easing.jswing=$.easing.swing;
$.extend($.easing, { 
	easeInBack: function(e, f, a, i, h, g) {
        if (g == undefined) {
            g = 1.70158
        }
        return i * (f /= h) * f * ((g + 1) * f - g) + a
    },
});
export default{
    addCartAni(id){
        var dom    = $("#add_"+id).find("em");
        var target = $('#cartnum');
        var dom    = dom.clone().css({'position':'fixed','opacity':1,'z-index':10000,'width':'0.3rem','height':'0.3rem','border-radius':'50%','background':'#ff7900'}).css(dom.offset()).appendTo('body');  
        dom.animate({left:[target.offset().left,'linear'],top:[target.offset().top, 'easeInBack']},500).fadeOut(200,function (){dom.detach();});       
    }
}

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:194条
  • 微信公众号:扫描二维码,关注我们
分享按钮