CSS3过渡transform3d

Question

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

• 我将光标移到.test-panel-1区域。
• 当我将光标移动到.test-panel-1区域之外时，将.expanded类添加到容器div中，并且.test-panel-2应该在2秒的过渡中从右侧缓慢滑入< / LI>
• 当我将光标移动到仍然可见的.test-panel-1部分时，类.expanded将从容器div中删除，而.test-panel-2应该在2秒过渡。

...但是这没有发生，没有过渡射击，它只是立即改变其位置x。为什么呢？

HTML：

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

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

    </div>
</div>

CSS：

.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);
}

JQuery的：

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

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 fiddle

使用Jquery

Js fiddle