如何应用2个动画？

Posted 2023-03-06

【中文标题】如何应用2个动画？

【英文标题】：How to apply 2 animations?

【发布时间】：2019-10-09 05:43:58

【问题描述】：

我不知道如何提出我的问题。

在我的网站（Drupal 8 和 Bootstrap 4）上，左上角有一个导航菜单，右上角有一个菜单：

https://dev.s1biose.com/fr/boutique/poupette-cacahuete

当我打开导航菜单时，背景变暗了。过滤器菜单也是如此。

问题：

如果我打开导航菜单而不关闭它并打开过滤器菜单，则没有深色背景。

为什么不显示效果？

左下角的加号按钮也有同样的问题。我点击加号按钮，底部变暗。如果我直接点击左上角的菜单，底部不会变暗。如果我关闭并打开菜单，它就可以工作。

这是我的自定义 JS 文件：

/**
 * @file
 * Global utilities.
 *
 */
(function ($, Drupal) 

  'use strict';

  $(document).click(function (event) 
    if ($(event.target).is('button')) 
      $('.navbar-collapse').collapse('hide');
    
  );

  $(document).click(function (event) 
    if (!$(event.target).is('.navbar-collapse *')) 
      $('.navbar-collapse').collapse('hide');
    
  );

  $('.collapse-navbar-first').on('show.bs.collapse', function () 
    $('body').addClass('bs-body-overlay');
  );

  $('.collapse-navbar-first').on('hide.bs.collapse', function () 
    $('body').removeClass('bs-body-overlay');
  );

  $('.collapse-navbar-second').on('show.bs.collapse', function () 
    $('body').addClass('bs-body-overlay');
  );

  $('.collapse-navbar-second').on('hide.bs.collapse', function () 
    $('body').removeClass('bs-body-overlay');
  );

  $('.collapse-navbar-first').on('show.bs.collapse', function () 
    $('.bs-background').addClass('bs-background-overlay');
  );

  $('.collapse-navbar-first').on('hide.bs.collapse', function () 
    $('.bs-background').removeClass('bs-background-overlay');
  );

  $('.collapse-navbar-second').on('show.bs.collapse', function () 
    $('.bs-background').addClass('bs-background-overlay');
  );

  $('.collapse-navbar-second').on('hide.bs.collapse', function () 
    $('.bs-background').removeClass('bs-background-overlay');
  );

)(jQuery, Drupal);

【问题讨论】：

我会假设，前一个选择的关闭发生在打开新的选择之后，导致覆盖类被删除

在这样做$('body').removeClass('bs-body-overlay');之前，您应该添加一个条件以查看其他元素是否未打开。

@pnadalini 好主意，但我从 JS 开始，我不是开发人员（只是业余爱好者）。你能告诉我怎么做吗？谢谢

@tropcool 我刚刚添加了一个答案，所以你可以解决这个问题，我想到了一个更好的主意，而不是添加验证

【参考方案1】：

您正在附加事件处理程序，最好将与触发器具有相同事件的代码分组。 （我在代码 sn-p 中就是这样做的）。

事件处理程序按事件发生的顺序触发。 您看到的行为是因为每个事件处理程序中的代码：

用户点击左侧导航栏按钮 事件：$('.collapse-navbar-first').on('show.bs.collapse') 被触发。 它添加了bs-body-overlay ---等待下一个用户点击----- 用户点击右导航栏按钮 事件 $('.collapse-navbar-second').on('show.bs.collapse) 被触发。 它还尝试添加bs-body-overlay，但它已经存在了。 事件$('.collapse-navbar-first').on('hide.bs.collapse') 被触发，因为发生了导航栏外的点击bs-body-overlay 被删除 那么您将处于您所描述的状态。

解决方案 1：为两个栏添加 css 类

基本上bs-body-overlay 用于左右导航栏，您可以将该类拆分为 2 个单独的类，这样它们就不会相互干扰 bs-body-overlay-left 和 bs-body-overlay-right 应用相同的规则，它们可以在元素上共存。

解决方案 2：检查是否有任何导航栏打开

您还可以检查是否有任何导航栏打开，在这种情况下不要删除 bs-body-overlay 类。 不过，检查这一点有点麻烦，因为引导程序仍在做动画。 IE 左右栏在获得show 类之前都获得了collapsing 类。

解决方案 3：手动跟踪打开/关闭的柱数

您可以跟踪打开/关闭的数量，并且只有在您确定可以删除 bs-body-overlay 时才删除它 我会选择解决方案 1

css:

.bs-body-overlay, .bs-body-overlay-left, .bs-body-overlay-right 
    overflow: hidden;


.bs-background-overlay. .bs-background-overlay-left, .bs-background-overlay-right 
    opacity: .8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    transition: .5s ease-out;

js:

/**
 * @file
 * Global utilities.
 *
 */
(function ($, Drupal) 

  'use strict';

  $(document).click(function (event)   // fired whenever anywhere is clicked
  
    if ($(event.target).is('button') || !$(event.target).is('.navbar-collapse *')) 
        // hide the elemnt when the click wasn't on the navbar or the button was clicked
      $('.navbar-collapse').collapse('hide');
    )   
  );

  $('.collapse-navbar-first').on('show.bs.collapse', function () 
    $('body').addClass('bs-body-overlay-left');
    $('.bs-background').addClass('bs-background-overlay-left');
  );

  $('.collapse-navbar-second').on('show.bs.collapse', function () 
    $('body').addClass('bs-body-overlay-right');
    $('.bs-background').addClass('bs-background-overlay-right');
  );
  
  $('.collapse-navbar-first').on('hide.bs.collapse', function () 
    $('body').removeClass('bs-body-overlay-left');
    $('.bs-background').removeClass('bs-background-overlay-left');
  );

  $('.collapse-navbar-second').on('hide.bs.collapse', function () 
    $('body').removeClass('bs-body-overlay-right');
    $('.bs-background').removeClass('bs-background-overlay-right');
  );
)(jQuery, Drupal);

【参考方案2】：

这个错误是因为当它打开另一个菜单时它试图在元素上添加类（已经有它），然后第一个菜单在它关闭时删除了这个类。

您可以为此做的一个简单修复（可能不是最优化的）是更改所有addClass 和removeClass 以使其成为toggleClass，如下所示：

$('.collapse-navbar-first').on('show.bs.collapse', function () 
  $('.bs-background').toggleClass('bs-background-overlay');
);
$('.collapse-navbar-first').on('hide.bs.collapse', function () 
  $('.bs-background').toggleClass('bs-background-overlay');
);

为了使代码更短，您可以像这样加入这两个事件：

$('.collapse-navbar-first').on('show.bs.collapse hide.bs.collapse', function () 
  $('.bs-background').toggleClass('bs-background-overlay');
);

【讨论】：

酷，我喜欢。这可能会导致闪烁，因为该类被打开和关闭并且背景上有一个过渡。这可能没问题，因为无论如何用户都在与页面交互。

@pnadalini 谢谢它的作品。但我不明白你的评论。这是我的pastebin.com/wzedRUVv 文件。我应该使用你的方法还是第二个答案？

@tropcool 您在 pastebin 文件中的内容看起来没问题，如果它有效，您应该保留它。我想说的是，your file 中的第 44 到 50 行可以删除，它也应该可以工作

另外，如果你觉得我的回答有用，你可以mark it as accepted

@pnadalini 为什么这些行没用？这不是同一个类，因为它禁止滚动正文