Zurb Foundation 6 Увеличение размера offcanvas делает его видимым во время загрузки - PullRequest
Новая
       18

Zurb Foundation 6 Увеличение размера offcanvas делает его видимым во время загрузки

1 голос
/ 03 апреля 2019

При создании веб-сайта с помощью Zurb Foundation я использую функцию вне холста.

Ширина по умолчанию для областей вне холста составляет 250 пикселей, и я хотел бы увеличить ее, скажем, до 600 пикселей.

К сожалению, когда я увеличиваю ширину вне холста, он становится видимым при загрузке ...

Кроме того, я заметил, что при расширении или закрытии холста, если этобольше, чем 250px, «слайд» работает только для 250px.

Вот HTML-код для проверки: 

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">
    <style>
      #off-canvas-right {
        width: 600px;
      }
    </style>
  </head>
  <body>

    <div class="off-canvas position-left" id="off-canvas-left" data-off-canvas>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque, eligendi. Deleniti rerum, distinctio tempora laboriosam velit incidunt hic asperiores officiis alias ea, sequi libero animi soluta totam, quia veritatis.
    </div>
    <div class="off-canvas position-right" id="off-canvas-right" data-off-canvas>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore voluptate velit, labore, voluptatem quia laborum temporibus asperiores at eos nulla nam ab fugit tenetur quaerat iusto architecto eum ea explicabo.
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <a data-open="off-canvas-left" class="text-center">Open left</a>
      <a data-open="off-canvas-right" class="text-center">Open right</a>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Есть идеи, которые помогут решить эти 2 проблемы?

1 Ответ

2 голосов
/ 03 апреля 2019

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

#off-canvas-right {
  &.off-canvas {
    width: 600px;
    transform: translateX(600px);
    &.is-open {
      transform: translate(0, 0);
    }
  }
}

Вот ссылка на работающий CodePen

...