Question

我在这样的基础中使用标准示例进行非画布导航...

<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');
});

但是这会在单击“打开”按钮时触发，是否有人知道我是否可以使用任何回调或类似方法，以便仅在脱画布动画结束后才应用CSS？

Answer 1

为此，基金会包括一个“打开”和“关闭”事件：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-关闭画布动画后进行回调

1 个答案: