CSS3 transition transform3d

Question

Based on the code below, here is what I would expect:

• I move my cursor over the .test-panel-1 area.
• When I move my cursor outside of the .test-panel-1 area, the class .expanded is added to the container div, and .test-panel-2 should slide in from the right slowly in a 2 second transition
• When I move my cursor over the part of .test-panel-1 that is still visible, the class .expanded is removed from the container div, and .test-panel-2 should transition off to the right slowly in a 2 second transition out.

...but this is not happening, there is no transition firing, it simply changes its position x immediately. Why?

$(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 property is not supported you can use opacity instead and you can use css instead of 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>

with CSS

Js fiddle

With Jquery

Js fiddle