Javascript CSS转换时间未应用于转换

我有一个div，应该可以平稳地向左滑动。现在它会立即跳到新的位置，而不是滑动

我正在使用jQuery在按下按钮后向div应用translsatex。它触发一些ajax，向div的css（底部）添加一个转换：

下面是popup类的所有样式，请注意，我定义的转换时间应该是代码块末尾的3秒

.popup{
  background-color: #FFFFFF;
  display: none;
  position: absolute;
  overflow: scroll;
  z-index: 5;
  right: -40%;
  width: 40%;
  height: 100%;
  -webkit-box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  -moz-box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  transition: transform 3s;
}

转换正在工作，div移动，但它不是一个动画移动。5秒后，它会立即出现在新的位置。我真的不知道如何开始对此进行故障排除。

尝试使用

transition: all 3s ease;

可能它没有特别考虑transform属性

transition: all 3s ease 0s;

---

解决了

我认为最好是在弹出窗口中添加类。这是最简单的方法

原因 转换不起作用，因为

显示：无

<代码>显示：无到<代码>显示：块无法设置动画，因此会中断转换

解决方案 一种解决方案是隐藏元素而不使用

display:none

。以下示例在div以

opacity:0隐藏并以
opacity:1显示时起作用

注意：其中
显示：无
将完全删除元素，
不透明度：0
仅将其隐藏，并且仍可与之交互。对于
例如，如果它位于链接上方，您将无法单击
由于不可见的div，链接被删除

为了克服这个问题，你可以考虑（见）
)这样单击事件就会在其下方传递。你
然后在显示时将其更改回
指针事件：auto
，因此
可以单击

基本示例

正文{
高度：100vh；
}
div{
高度：100px；
宽度：100px；
背景：#F00；
转变：转变1s；
}
主体：悬停div{
转换：translateX（100px）；
}
/*行得通*/
.willTransition{
不透明度：0；
}
身体：悬停。意志转换{
不透明度：1；
}
/*不起作用*/
.wontTransition{
显示：无；
}
身体：悬停。不会转换{
显示：块；
}
将鼠标悬停在此处的任意位置即可显示！
将转换为不透明度
不会将“显示无”转换为“阻止”
不确定您使用的浏览器，但您可能希望确保涵盖所有选项-webkit-、-moz-、-ms-、-o-（最后两个，如果适用）。@Gacci-请注意，本机属性几乎得到了普遍支持。这就是为什么我添加了“如果适用”的原因。感谢您的帮助，但遗憾的是没有区别。尝试了这个，没有区别：（.也许你可以开始使用jquery动画。你可以在这里查看文档
transition: all 3s ease 0s;