Zurb Foundation - 关闭 canvas 动画后的回调

Question

我在基础中使用标准示例关闭 canvas 导航...

<body>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
  </div>
</body>

我正在寻找一种在动画结束后触发 jquery CSS 函数的方法。

到目前为止我有这个..

$( document ).on( "close.offcanvas", function( e ){
    //$('.pagination').css('display','block');
});

但这会在单击打开按钮时触发，有人知道我是否可以使用任何回调或类似方法，以便仅在关闭 canvas 动画后才应用 CSS完成了吗？

Answer 1

基金会为此目的包括了一个 'opened' 和 'closed' 活动：https://foundation.zurb.com/sites/docs/off-canvas.html#js-events

在下面的代码示例中，我在菜单关闭时向控制台输出了一条消息。

$(document).foundation()

$('#offCanvas').on('closed.zf.offcanvas', function(event) {
  //$('.pagination').css('display','block');
  console.log("Off-canvas menu was closed.")
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/js/foundation.min.js"></script>

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>

  <!-- Menu -->
  <ul class="vertical menu">
    <li><a href="#">Foundation</a></li>
    <li><a href="#">Dot</a></li>
    <li><a href="#">ZURB</a></li>
    <li><a href="#">Com</a></li>
    <li><a href="#">Slash</a></li>
    <li><a href="#">Sites</a></li>
  </ul>

  <!-- Close button -->
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>

</div>

<div class="off-canvas-content" data-off-canvas-content>
  <!-- Your page content lives here -->
  <button type="button" class="button" data-toggle="offCanvas">Open off-canvas</button>
</div>

Zurb Foundation - 关闭 canvas 动画后的回调

Zurb Foundation - Callback after off canvas animation

zurb-foundation

zurb-foundation-6

off-canvas-menu