Javascript CSS转换不需要持续时间

我正在做一些简单的CSS动画

这是我的CSS：

#contactBtn {
  transition: width 1.5s, height 1.5s, transform 1.5s;
}

然后在我的JS中单击我做：

contactBtn.style = "width: 61em; height: 35em; transform: translateX(0)";

宽度和高度按预期设置动画，比原始值增加1.5秒。转换也会发生-元素移动到我期望的位置。但它会立即跳起来，而不是延迟

到目前为止，他们只测试了铬

我尝试拆分CSS，如下所示，但没有成功：

#contactBtn {
  transition-duration: 1.5s;
  transition-property: width height transform;
}

---

提前感谢您的回答。

我已经测试过了，效果很好！更改之前，您的translateX值是多少？！它以前没有translateX值-它的初始位置由左边距设置，与中显示的另一个元素相对：单击此元素时无TranslateX值只有当您有旧值时，Translates才工作，这就是它们的工作方式！因此，在设置新值之前，您应该设置转换的值。。。你可以用javascript计算…我已经测试过了，效果很好！更改之前，您的translateX值是多少？！它以前没有translateX值-它的初始位置由左边距设置，与中显示的另一个元素相对：单击此元素时无TranslateX值只有当您有旧值时，Translates才工作，这就是它们的工作方式！因此，在设置新值之前，您应该设置转换的值。。。你可以用javascript计算。。。