抛物线运动路径动画实现

addBtn.onclick = function () {const div = document.createElement('div');div.className = 'add-circle';const span = document.createElement('span');span.className = 'add-icon';div.appendChild(span);document.body.appendChild(div);// 外层容器横向移动，里面图标纵向偏移div.style.transform = 'translateX(100px)';span.style.transform = 'translateY(100px)';div.clientWidth; // 强制回流然后渲染div.style.transform = 'translateX(300px)';span.style.transform = 'translateY(700px)';
};

.add-circle {position: fixed;left: 50px;top: 50px;width: 40px;height: 40px;border-radius: 50%;transition: 1s linear;
}
.add-icon {display: block;width: 30px;height: 30px;background-color: black;border-radius: 50%;transition: 1s cubic-bezier(0.5, -0.5, 1, 1);
}

https://cubic-bezier.com/#.5,-0.5,1,1



重点：控制父容器横向移动，小球纵向移动，为了模拟抛物线运动，过渡的时间速度曲线函数要使用cubic-bezier(0.5, -0.5, 1, 1)；绘制出的时间速度曲线函数如第一张图所示，可以模拟按照抛物线路径运动。