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小提琴

使用Jquery

JS小提琴