CSS3 转换 transform3d

Question

根据下面的代码，这是我所期望的：

我将光标移到 .test-panel-1 区域。
当我将光标移出 .test-panel-1 区域时，class .expanded 被添加到容器 div，并且 .test-panel-2 应该滑入在 2 秒的过渡中从右边慢慢开始
当我将光标移到仍然可见的 .test-panel-1 部分时，class .expanded 将从容器 div 中删除，并且 .test-panel- 2 应该在 2 秒的过渡时间内缓慢过渡到右侧。

...但这并没有发生，没有转换触发，它只是立即改变它的位置 x。为什么？

$(document).ready(function() {
  $(".test-panel-1").hover(function() {
    $(".test-container").removeClass("expanded");
  }, function() {
    $(".test-container").addClass("expanded");
  });
});

.test-container .test-panel-1 {
  width: 230px;
  background-color: #CC0000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.test-container .test-panel-2 {
  width: 179px;
  background-color: #000000;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  -webkit-transition: -webkit-transform 2000ms ease;
  transition: transform 2000ms ease;
  -webkit-transform: translate3d(230px, 0, 0);
  transform: translate3d(230px, 0, 0);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2;
}

.test-container.expanded .test-panel-2 {
  display: block;
  transition: transform 2000ms ease;
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test-container">
  <div class="test-panel-1">

  </div>
  <div class="test-panel-2">

  </div>
</div>

Answer 1

不支持

for transition display 属性你可以使用不透明度代替，你可以使用 css 代替 jquery

.test-container .test-panel-1 {
  width: 230px;
  background-color: #CC0000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.test-container .test-panel-2 {
  width: 179px;
  background-color: #000000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  -webkit-transition: all 2000ms ease;
  transition: all 2000ms ease;
  -webkit-transform: translate3d(230px, 0, 0);
  transform: translate3d(230px, 0, 0);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}
.test-container:hover .test-panel-2 {
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
  opacity: 1;
  visibility: visible;
}

<div class="test-container">
  <div class="test-panel-1"></div>
  <div class="test-panel-2"></div>
</div>

和CSS

Js fiddle

和Jquery

Js fiddle

CSS3 转换 transform3d

CSS3 transition transform3d

css

jquery

css-transitions