如何使用js移动位置：固定元素从A到B的动画

【问题标题】：How to use js to move a position:fixed element from A to B with animation如何使用js移动位置：固定元素从A到B的动画
【发布时间】：2021-12-21 20:40:05
【问题描述】：

起点A位置：(a, b);
终点B位置：(x, y);
以及动画风格： transition: all 0.5s cubic-bezier(0.49, -0.29, 0.75, 0.41);

【问题讨论】：

标签： javascript css css-animations

【解决方案1】：

你可以这样做：

let root = document.documentElement;

function moving() {
  root.style.setProperty('--pose-y', "150px");
  root.style.setProperty('--pose-x', "150px");
}

:root {
--pose-x: 100px;
--pose-y: 0px;
}

.item {
left: var(--pose-x);
top: var(--pose-y);
width: 50px;
height: 50px;
background: blue;
position: fixed;
transition: all 0.5s cubic-bezier(0.49, -0.29, 0.75, 0.41);
}

<div class="item"></div>
<button onclick="moving()">Click here</button>

【讨论】：

还是谢谢你的回答，我最终还是选择使用anime.js