CSS过渡时间不适用于转换

Question

我有一个div，应该在.5s内平稳地向左滑动。 现在，它立即弹出到新位置，而不是滑动。

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

 $.ajax({
         method: 'POST',
         url: '/cities/popup',
         data: { latitude: latitude, longitude: longitude },
         dataType: 'html',
         success: function(data){
          $(".popup").css("display", "block");
          $(".popup").empty();
          $(".popup").append(data);
          $(".popup").css("transform", "translateX(-100%)");
 });

这是popup类的所有样式，请注意，我定义的转换时间应在代码块末尾为3s。

.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移动，但不是超过0.5s的动画移动，只是立即出现在新位置。 我真的不确定如何开始对此进行故障排除。

Answer 1

原因

过渡由于display: none而无法正常工作display: none 。 display: none display: block无法设置动画，因此会中断过渡。

解

一种解决方案是不使用display: none隐藏元素display: none 。 以下示例在div以opacity: 0隐藏并以opacity: 1显示时起作用。

注意 ： display: none可以完全删除元素， opacity: 0只是将其隐藏，并且仍然可以与之交互。 例如，如果它位于链接上，则由于div不可见，您将无法单击该链接。

为了克服这个问题，您可以考虑使用pointer-events: none （请参阅浏览器兼容性 ），以便单击事件在其下方传递。 然后，您可以将其更改回pointer-events: auto显示时为pointer-events: auto ，因此可以单击它。

基本例子

 body { height: 100vh; } div { height: 100px; width: 100px; background: #F00; transition: transform 1s; } body:hover div { transform: translateX(100px); } /*Will work*/ .willTransition { opacity: 0; } body:hover .willTransition { opacity: 1; } /*Doesn't work*/ .wontTransition { display: none; } body:hover .wontTransition { display: block; } 

 <h1> Hover anywhere here to show!</h1> <h2>Will transition with opacity</h2> <div class="willTransition"></div> <h2>Wont transition with display none to block</h2> <div class="wontTransition"></div> 

Answer 2

尝试使用

transition: all 3s ease;

可能它没有特别重视transform属性。

Answer 3

transition: all 3s ease 0s;

解决了！

Answer 4

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