从另一个组件位置设置单个可观察元素的动画

<!-- HTML结构 -->
<div id="component1">
  <!-- 另一个组件 -->
</div>

<div id="targetElement">
  <!-- 目标元素 -->
</div>

/* CSS样式 */
#targetElement {
  transition: all 0.5s ease; /* 定义动画过渡效果 */
}

// JavaScript代码
const component1 = document.getElementById('component1');
const targetElement = document.getElementById('targetElement');

// 获取组件和目标元素的位置信息
const componentRect = component1.getBoundingClientRect();
const targetRect = targetElement.getBoundingClientRect();

// 计算动画参数
const startX = componentRect.left;
const startY = componentRect.top;
const endX = targetRect.left;
const endY = targetRect.top;
const duration = 500; // 持续时间，单位毫秒

// 设置动画效果
targetElement.style.transform = `translate(${endX - startX}px, ${endY - startY}px)`;

// 监听动画事件
targetElement.addEventListener('transitionend', () => {
  // 动画完成后执行的操作
});