<template> <div class="cubic-bezier-ball" v-for="item in ballList" :ref="(el) => setRefAction(el, item)" :key="item"> <slot></slot> </div> </template>2、执行动画效果处理,将dom移动到起点,执行动画到末点,并在动画结束后销毁节点
//堆代码 duidaima.com //开始执行动画 const start = (point: any, time = 1, xcubic = 'linear', ycubic = 'ease-in') => { const nowTime = new Date().getTime(); //新增一个动画节点 ballList.value.push(nowTime); //dom渲染后增加动画效果 nextTick(() => { const ele = ballRef.value[nowTime]; ele.style.left = `${point.x1}px`; ele.style.top = `${point.y1}px`; ele.style.opacity = 1; setTimeout(() => { ele.style.left = `${point.x2}px`; ele.style.top = `${point.y2}px`; ele.style.transition = `left ${time}s ${xcubic}, top ${time}s ${ycubic}`; }) setTimeout(() => { ele.style.opacity = 0; ele.style.left = `${point.x1}px`; ele.style.top = `${point.y1}px`; //动画结束回收dom removeDom(nowTime); }, time * 1000) }) }3、保留每个Dom引用,移除dom
//将循环ref放入到数组中 const setRefAction = (el: any, item: number) => { ballRef.value[item] = el; } //动画结束回收dom const removeDom = (nowTime: number) => { ballList.value = ballList.value.filter((item: number) => { return item != nowTime; }) }使用示例
npm install @fcli/vue-cubic-bezier --save-dev
来安装。
import VueCubicBezier from '@fcli/vue-cubic-bezier'; const app=createApp(App) app.use(VueCubicBezier);示例:
<template> <div class="content"> <cubic-bezier ref="myCubic"> 测试 </cubic-bezier> <button class="btn" @click="getData">开始</button> </div> </template> <script setup lang="ts"> import CubicBezier from './plugin/index.vue'; import { ref } from 'vue'; component: { CubicBezier } const myCubic = ref<any>(); const params = { point: { x1: 250, y1: 50, x2: 100, y2: 400 }, time: 0.5, xcubic: 'linear', ycubic: 'cubic-bezier(0.49, -0.29, 0.75, 0.41)', } const getData = () => { myCubic.value.start(params.point, params.time, params.xcubic, params.ycubic) } </script>参数说明
属性 | 属性名称 | 类型 | 可选值 |
---|---|---|---|
point | 起点和结束点距离左上角的距离,(x1,y1)起点坐标,(x2,y2)结束点坐标 | object | { x1: 250, y1: 50, x2: 100, y2: 400 } |
time | 动画效果过渡时间 | number | 1 |
xcubic | 横向过渡贝赛尔动画参数 | number | linear |
ycubic | 竖向过渡贝赛尔动画参数 | number | ease-in |