jquery - CSS3 过渡 transform3d

Question

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

• 我将光标移到 .test-panel-1 区域。
• 当我将光标移出 .test-panel-1 区域时，类 .expanded 被添加到容器 div，并且 .test-panel-2 应该在 2 秒的过渡中从右侧缓慢滑入
• 当我将光标移到仍然可见的 .test-panel-1 部分时，类 .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

对于 transition display 属性不支持你可以使用 opacity 代替你可以使用 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