CSS3转换转换3d

Question

基于下面的代码，以下是我所期望的：

• 我将光标移到.test-panel-1区域上
• 当我将光标移到.test-panel-1区域之外时，扩展类被添加到容器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属性，您可以使用不透明度，也可以使用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小提琴

带Jquery

Js小提琴