Javascript 无缝播放新的css动画

我创建了一个简单的HTML游戏，当我点击一个移动的框时，它就会消失在屏幕下。 但是，消失的动画从原始位置开始，而不是单击的位置

我认为0%的

remove@keyframes

应该有单击的位置，但我找不到方法

我该怎么做

（函数（）{
常量charactersGroup=document.queryselectoral（'.character'）；
const stage=document.querySelector（“.stage”）
常量clickHandler=（e）=>{
const target=e.target；
if（target.classList.contains（'character'））{
remove（`f${target.dataset.id}`）；
target.classList.add（'f0'）；
target.classList.add（'remove'）；
setTimeout（（）=>{stage.removeChild（target）}，2000）；
}
}
stage.addEventListener（'click'，clickHandler）；
}());
.stage{
溢出：隐藏；
位置：相对位置；
背景：#eeeeaa；
宽度：40vw；
高度：20vw；
}
@关键帧移动{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（30vw）；
}
}
@关键帧移除{
0% {
变换：平移（0）；
}
100% {
变换：translateY（60vw）；
}
}
.性格{
位置：绝对位置；
宽度：50px；
高度：50px；
背景重复：无重复；
背景位置：50%50%；
背景尺寸：包含；
动画：移动无限交替；
}
.移除{
动画：删除0.2s立方贝塞尔（.68，-0.55，.27,1.55）向前；
}
.f0{
背景色：黑色；
动画持续时间：2秒；
}
.f1{
左：5%；
底部：5%；
动画持续时间：2秒；
背景色：红色；
}
如果您的用例要处理大量这样的框和复杂性，那么最好使用纯JS处理所有事情，但我尝试在JS和CSS中进行最小的更改

我在新的JS行中添加了注释

我们还为动画
moving
创建了一个名为
moving
的单独类，这样我们就可以在单击时将其删除


（函数（）{
常量charactersGroup=document.queryselectoral（'.character'）；
const stage=document.querySelector（“.stage”）
常量clickHandler=（e）=>{
const target=e.target；
if（target.classList.contains（'character'））{
remove（`f${target.dataset.id}`）；
target.classList.add（'f0'）；
//删除移动动画
target.classList.remove（'moving'）；
//获取offsetWidth，它是在计算目标（即我们的框）的左侧时要减去的宽度的一半。
const offsetWidth=parseInt（getComputedStyle（target）.width）/2；
//clientX为我们提供鼠标指针的x坐标
//target.getBoundingClientRect（）.left为我们提供了边框的左侧位置，并充当了一个良好的偏移量，以获得框的精确左侧。
target.style.left=`${e.clientX-target.getBoundingClientRect（）.left-offsetWidth}px`；
target.classList.add（'remove'）；
setTimeout（（）=>{stage.removeChild（target）}，2000）；
} 
}
stage.addEventListener（'click'，clickHandler）；
}());
.stage{
溢出：隐藏；
位置：相对位置；
背景：#eeeeaa；
宽度：40vw；
高度：20vw；
}
@关键帧移动{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（30vw）；
}
}
@关键帧移除{
0% {
转换：转换（0vh）；
}
100% {
变换：translateY（60vw）；
}
}
.性格{
位置：绝对位置；
宽度：50px；
高度：50px；
背景重复：无重复；
背景位置：50%50%；
背景尺寸：包含；
}
.搬家{
动画：移动无限交替；
}
.移除{
动画：删除0.2s立方贝塞尔（.68，-0.55，.27,1.55）向前；
}
.f0{
背景色：黑色；
动画持续时间：2秒；
}
.f1{
左：5%；
底部：5%；
动画持续时间：2秒；
背景色：红色；
}

< /代码> 将第一个动画更改为考虑<代码>左>代码>而不是转换，然后将它们两个附加到初始元素上，然后在添加<代码>删除< /代码>类
时，简单地切换<代码>动画播放状态< /代码>。

（函数（）{
常量charactersGroup=document.queryselectoral（'.character'）；
const stage=document.querySelector（“.stage”）
常量clickHandler=（e）=>{
const target=e.target；
if（target.classList.contains（'character'））{
target.classList.add（'remove'）；
设置超时（（）=>{
stage.removeChild（目标）
}, 2000);
}
}
stage.addEventListener（'click'，clickHandler）；
}());
.stage{
溢出：隐藏；
位置：相对位置；
背景：#eeeeaa；
宽度：40vw；
高度：20vw；
}
@关键帧移动{
100% {
左：计算（95%-50px）；
}
}
@关键帧移除{
50% {
转换：translateY（-30vh）；
}
100% {
变换：translateY（60vw）；
}
}
.性格{
位置：绝对位置；
宽度：50px；
高度：50px；
背景：红色；
左：5%；
底部：5%；
动画：
移动2个无限交替，
删除1s立方贝塞尔（.68，-0.55，.27，1.55）向前暂停；
}
.移除{
动画播放状态：暂停，正在运行；
背景：黑色；
}
解决方案是使用JS而不是CSS设置位置动画。CSS动画不是针对您在其中使用它们的上下文制作的。您还可以将f1包装到另一个容器中，该容器通过单击定位。但从长远来看，你会想给f1指定坐标，把它显示在这些坐标指向的地方