Question

我在页面顶部有一个容器，可以使用transform：translate（）“隐藏”。当我单击图标时，我希望此容器向下滑动，将整个页面推到底部。我已经使用CSS做到了这一点：transform：translate（）。当我单击时，我为页面的主要容器添加了一些Css类，例如页眉，页脚和主要部分。这行得通。

现在，我希望此动画流畅。现在出现了我的问题。当我单击以使容器可见时，它应通过一个类向所有主容器添加“过渡”，然后添加使“推入底部”的类（用translate（Y ））。这也可以。

但是当容器可见时，我再单击一次图标，我希望容器向上滑动（仍使用平移）到其原始位置。这意味着当容器可见并且我想“关闭”它时，它应该删除定义translate（Y）的类，然后删除定义过渡的类。

所以：单击->过渡->翻译（Y）打开时：点击->翻译（Y）->过渡

我尝试使用“ bind”和“ on”方法来检测动画的结束，但这不起作用。这是我的代码：

$(".language-menu-action").click(function () {
      if ($(this).hasClass("show")) {
          $(".sticky-scroll-box").removeClass("header-show");
          $("#pageBody, .footer").removeClass("open-header");
          $(".language-menu-action").removeClass("show");

          $('.animated-transform').bind('webkitTransitionEnd otransitionend     oTransitionEnd msTransitionEnd transitionend', function (e) {
              $('#pageBody, .footer, .navbar').removeClass('animated-transform');
        });

      } else {
          $('#pageBody, .footer, .navbar').addClass('animated-transform');

          $(".sticky-scroll-box").addClass("header-show");
          $("#pageBody").addClass("open-header");
          $(".footer").addClass("open-header");
          $(".language-menu-action").addClass("show");
      }
  });

更新：我当前正在使用延迟。

$(".language-menu-action").click(function () {
    if ($(this).hasClass("show")) {
        $(".sticky-scroll-box").removeClass("header-show");
        $("#pageBody, .footer").removeClass("open-header");
        $(".language-menu-action").removeClass("show");

        $('#pageBody, .footer, .navbar').delay(350).queue(function(){
            $(this).removeClass('animated-transform').dequeue();
        });

    } else {
        $('#pageBody, .footer, .navbar').addClass('animated-transform');

        $(".sticky-scroll-box").addClass("header-show");
        $("#pageBody").addClass("open-header");
        $(".footer").addClass("open-header");
        $(".language-menu-action").addClass("show");
    }
});

如果有更好的解决方案，我可以接受;）

添加一个类，然后仅在动画完成后将其删除

0 个答案: