由于CSS调整了弹出退出动画

Question

Sup，
我正在开发一个 Shopify 页面，并创建了一个弹出滑块，显示尺寸表等。
所以基本上是因为 css

top: 0; bottom: 0

动画关闭但转到右上角。

我希望动画与入口动画相同。 基本上我无法控制退出动画只是向右滑出而不到顶部。

请参阅 JSFiddle 了解完整代码和复制：https://jsfiddle.net/Komplexe/zcnwyegq/1/

Answer 1

我认为有一种更简单的方法可以通过使用 CSS 来做到这一点 https://jsfiddle.net/3owkLsag/5/

.sizing-table-container {
  transition: 333ms ease-in-out;
  transform: translateX(calc(100% + 30px));
}

.opened .sizing-table-container {
  transform: translateX(0%);
}

您需要做的就是切换

.open

类并使用它来隐藏/显示屏幕边缘后面的菜单。

    $(".close-call").click(function () {
      
      $("body").toggleClass("opened");
      
    });