Javascript 移动元素时CSS转换不起作用

我有一个CSS元素/球，我点击它就会移动到新的坐标

这是可行的，但是我正在申请的过渡似乎没有生效

球跳到新位置。我想让它慢慢地设置动画/转换/移动到新的坐标

我做错了什么

.ball {
    width: 30px;
    height: 30px;
    border-radius: 50%; 
    background-color: #FF5722;
    position: absolute;
    // d.style.transition = "all 1s ease-in";
    transition: all 3s ease-in-out;
    // -webkit-transition: all 1s ease-in-out;
    // -moz-transition: all 1s ease-in-out;
    // -o-transition: all 1s ease-in-out;
    // -ms-transition: all 1s ease-in-out;
  }

 handleClick = (e) => {
      console.log('ball clicked');
      var d = document.getElementById('ball');
      console.log('d', d);
      d.style.x =  12 + "px";
      d.style.top = 341 + "px";
      d.style.transition = "all 1s ease-in";
  }

---

谢谢

您必须为

x

和

top

指定一个默认值，否则您将尝试从零过渡

另外，您的CSS似乎正在选择类为

ball

的元素，而不是ID为

ball

的元素。在CSS中使用

#ball

而不是

.ball

。（归功于jaromanda-x）

window.onclick=（e）=>{
log（'ball clicked'）；
var d=document.getElementById（'ball'）；
控制台日志（'d'，d）；
d、 样式x=12+“px”；
d、 style.top=341+“px”；
d、 style.transition=“所有1容易进入”；
}

球{ 宽度：30px； 高度：30px； 边界半径：50%； 背景色：#FF5722； 位置：绝对位置； //d.style.transition=“所有1容易进入”； 过渡：所有3个易于输入输出； //-webkit转换：所有1易于输入输出； //-moz转换：所有1都易于输入输出； //-o-转换：所有1都易于输入输出； //-ms转换：所有1都易于输入输出； x:0；/*默认值*/ 顶部：0；/*默认值*/ }

---

您必须为

x

和

top

指定一个默认值，否则您将尝试从零转换

另外，您的CSS似乎正在选择类为

ball

的元素，而不是ID为

ball

的元素。在CSS中使用

#ball

而不是

.ball

。（归功于jaromanda-x）

window.onclick=（e）=>{
log（'ball clicked'）；
var d=document.getElementById（'ball'）；
控制台日志（'d'，d）；
d、 样式x=12+“px”；
d、 style.top=341+“px”；
d、 style.transition=“所有1容易进入”；
}

球{ 宽度：30px； 高度：30px； 边界半径：50%； 背景色：#FF5722； 位置：绝对位置； //d.style.transition=“所有1容易进入”； 过渡：所有3个易于输入输出； //-webkit转换：所有1易于输入输出； //-moz转换：所有1都易于输入输出； //-o-转换：所有1都易于输入输出； //-ms转换：所有1都易于输入输出； x:0；/*默认值*/ 顶部：0；/*默认值*/ }

---

似乎有一些事情需要纠正

• 球由CSS中的

  .ball

  类设置样式，其中，通过id访问球元素，这表明存在潜在问题。

  ball

  类是否应用于id为

  ball

  的元素
• 样式对象上的

  x

  属性应替换为

  left

  属性，以确保球元素的水平移动
• 确保在修改任何CSS属性之前将转换指定给目标元素

下面的示例演示了这些更正：

const handleClick=（e）=>{
log（'ball clicked'）；
const ball=document.getElementById（'ball'）；
/*设置随机坐标以演示过渡*/
ball.style.left=Number.parseInt（Math.random（）*200）+“px”；
ball.style.top=Number.parseInt（Math.random（）*200）+“px”；
}
文件。添加的列表器（“单击”，手动单击）
#字段{
位置：相对位置；
宽度：100%；
身高：100%；
}
/*已更正为使用#而不是类选择器的id选择器
有*/
#球{
位置：绝对位置；
宽度：30px；
高度：30px；
边界半径：50%；
背景色：#FF5722；
位置：绝对位置；
/*指定在过程中应用的转换行为
属性更改*/
过渡：所有3个易于输入输出；
}
似乎有一些事情需要纠正


球由CSS中的
.ball
类设置样式，其中，通过id访问球元素，这表明存在潜在问题。
ball
类是否应用于id为
ball
的元素
样式对象上的
x
属性应替换为
left
属性，以确保球元素的水平移动
确保在修改任何CSS属性之前将转换指定给目标元素

下面的示例演示了这些更正：


const handleClick=（e）=>{
log（'ball clicked'）；
const ball=document.getElementById（'ball'）；
/*设置随机坐标以演示过渡*/
ball.style.left=Number.parseInt（Math.random（）*200）+“px”；
ball.style.top=Number.parseInt（Math.random（）*200）+“px”；
}
文件。添加的列表器（“单击”，手动单击）
#字段{
位置：相对位置；
宽度：100%；
身高：100%；
}
/*已更正为使用#而不是类选择器的id选择器
有*/
#球{
位置：绝对位置；
宽度：30px；
高度：30px；
边界半径：50%；
背景色：#FF5722；
位置：绝对位置；
/*指定在过程中应用的转换行为
属性更改*/
过渡：所有3个易于输入输出；
}

在更改属性之前，元素上应该存在转换。。。这意味着在处理程序中的这个代码之前runs@JaromandaX-我确实将其添加到css类中，但这也不起作用..如果最后添加了转换，则会跳转，因为其他值已经更改。通常情况下，虽然转换被添加到css类中，所以它一直在那里。
getElementById（'ball'）
。。。。在样式表中需要
#ball
而不是
。ball
顺便说一下，更改转换