vue 动态配置keyFrames实现图片基于自定义位置移动的动画

七度的秋

已于 2022-09-26 09:04:40 修改

阅读量1.8k

点赞数 3

文章标签： vue.js javascript 前端

于 2022-09-26 09:03:10 首次发布

本文链接：https://blog.csdn.net/qq_38666069/article/details/127014478

版权

这篇博客介绍了如何在Vue.js中利用keyframes动态配置，实现图片基于自定义位置的移动动画。开发者可以调整移动速度，文章提供了一个2秒动画的示例，并附带了实际运行效果的demo。

摘要由CSDN通过智能技术生成

说明

只用做开发中记录，不喜勿喷，谢谢。
直接上效果图，可配置移动速度（代码中为2s，具体效果以运行为主）。

demo

源码

<template>
  <div id="container">
    <button class="moveBox" @click="moveBox">Move 动起来</button>
    <div
      class="wrapper"
      :style="{
        'animation-name': 'flyableBox' + currentStep,
        left: currentPos.left + 'px',
        top: currentPos.top + 'px',
      }"
    >
      <img class="icon" :src="url" alt="" />
    </div>
  </div>
</template>

<script</