The plugin is introduced(插件介绍)

This plugin makes it easier for you to animate a projectile to a target point. Allow installation as long as the HTML specification exists (js based development)

该插件提供你更简单的实现一个投掷物到目标点的动画。只需在存在HTML规范下都允许安装使用（基于js开发）

installation method(安装使用方法)

 npm install kk-throw

Use （使用）

1、Introduce plug-in files and styles globally or in components after installation（安装后在全局或组件引入插件文件和样式）

 import Throw from "kk-throw";
 import "kk-throw/css/kk-throw.css";

2、Use the throw () function provided by the plug-in to customize the plug-in.（使用插件提供的throw（）函数进行插件的定义【具体参数请看下方】）

Throw.throw（{}）

Procedure for using Vue instance（Vue组件使用实例 使用步骤）

<template>
  <div>
    <div class="goods" @click="del('goods', 'cart')"></div>
    <div class="cart"></div>
  </div>
</template>

<script>
//引入插件和默认css
import Throw from "kk-throw";
import "kk-throw/css/kk-throw.css";

export default {
  methods: {

    del(clss1, clss2) {
      // 使用插件
      Throw.throw(
        {
          Start: clss1, //起点元素Class（必填）
          End: clss2, //终点元素Class（必填）
          Imgurl: "https://s3.bmp.ovh/imgs/2021/11/1433cd8f0834bedf.jpeg", //图片url（必填）
          StartClass: "daqiu", //自定义投掷物起点样式Class
          EndClass: "zhong", //自定义投掷物终点样式Class
          Time: 0.5, //动画时间
        }, function () {
          console.log("动画执行结束回调函数");
        }
      );

    },


  },
};
</script>

Vue component use example Throw custom CSS class add use（Vue组件使用实例 投掷物自定义CSS类的添加使用）

Custom start or end styles must be written in the VUE globally accessible CSS. Do not write them in the component's exclusive style scope, otherwise they will not be valid（自定义的起点（StartClass）或终点（EndClass）样式需在vue全局可访问的css处编写，请勿在组件独享样式scope编写，否则无效）

<style>
/* 起点自定义样式 */
 .daqiu {
  width: 200px;
  height: 200px;
  border-radius: 50%;
 }

/* 终点自定义样式 */
 .zhong {
  opacity: 0;
  transform: scale(0);
 }
</style>

API

| Name | Type | Description | Default | required | | :--------------------------- | :----------: | ---------------------------------------------------------------------------------------------------- | :------: | :---------: | | Start | String | The class name of the destination starting CSS(目标开始CSS的类名) | - | ture | | End | String | Target end CSS class name(目标结束CSS的类名) | - | true | | Imgurl | String | Projectile image URL(投掷物图片URL) | - | true | | StartClass | String | Custom CSS class for throwing objects at the start of animation(自定义CSS类，用于在动画开始时投掷物样式) | - | false | | EndClass | String | The end of the animation throws a custom CSS class(自定义CSS类，用于在动画结束时投掷物样式) | - | false | | Time | Number | property CGFloat duration(投掷物动画时间) | 1s | false | | Call-back | Function | The callback function after the animation has finished executing(动画执行结束后的回调函数) | | false |