Zurb Foundation - Обратный звонок после анимации вне холста - PullRequest
Новая
       27

Zurb Foundation - Обратный звонок после анимации вне холста

0 голосов
/ 16 октября 2018

Я использую стандартный пример для навигации вне холста в основании, как это ... 

<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>

Я ищу способ вызвать функцию CSS jquery после завершения анимации.

Пока у меня есть это. 

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

Но это срабатывает, когда нажимается кнопка открытия, кто-нибудь знает, есть ли какие-либо обратные вызовы или подобные, которые я могу использовать, чтобы применить только CSSпосле завершения анимации вне холста?

1 Ответ

0 голосов
/ 20 ноября 2018

Основание включает в себя событие «открыто» и «закрыто» для этой цели: 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>
...