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);    };  }}());            }

,2，使用方法如下：（使用很简单，代码还可以优化，你们自己去优化吧 ，我就不写了，反正没什么大影响）

 // 设置滚动球，加入购物车动画            // 添加购物车            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)