заставить линии svg рисовать, когда их контейнер ul виден - PullRequest
Новая
       6

заставить линии svg рисовать, когда их контейнер ul виден

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

Я создал меню «Карта сайта», которое использует svgs для подключения каждого из пунктов меню. На данный момент svg's являются статичными. Тем не менее, я считаю, что это возможно сделать?

У меня есть дополнительное осложнение: я хочу, чтобы линии прорисовывались только тогда, когда виден их контейнер ul.

В настоящее время они видны, когда родительский ли завис над ... 

   #submenu-1 li:hover>ul {
      visibility: visible;
      opacity: 1;
      max-height: 500px;
      transition: opacity 0.5s ease-in;
    }

Вот ссылка на скрипку https://jsfiddle.net/spittman/sn3xg5Lb/113/show

Есть идеи?

Спасибо Сэм

1 Ответ

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

Где вы застряли?Существует множество вопросов и ответов о переполнении стека о том, как анимировать рисование линий в SVG.

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

Например: 

<svg viewBox="0 0 900 50">
  <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>
  <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>
  <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>
  <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>
</svg>

Анимация рисования линии выполняется путем установки stroke-dasharray, равного длине линии,Затем вы анимируете stroke-dashoffset от этой длины до 0. В Интернете есть много обучающих программ, которые объясняют, как это работает.Я не буду повторять здесь детали. 

#submenu-1 li ul svg polyline.st0 {
  stroke-dasharray: 388px;
  stroke-dashoffset: 388px;
}

Затем при наведении мыши мы переводим stroke-dashoffset с 388 на 0. 

#submenu-1 li:hover>ul svg polyline.st0 {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease-in;
}

Вам нужно будет повторить вышеуказанные шагидля каждого дерева SVG.Для меньших древовидных графиков значение 388px необходимо будет уменьшить.

Полный пример: 

$('#menu').mouseover(function () {
      $('#page-title').hide();      
});
$('#menu').mouseout(function () {
      $('#page-title').show();      
});
@import url("https://use.typekit.net/tud5kgo.css");

body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: black;
}

/* Main Menu*/

#submenu-1 {
  list-style: none;
  margin: 0;
  padding: 0px 0 0 0;
}

/* Level 1 – List item  */

#submenu-1 li {
  width: 900px;
  float: left;
  text-align: center;
  padding-top: 10px;
}

#submenu-1 li:hover>ul {
  visibility: visible;
  opacity: 1;
  max-height: 500px;
  transition: opacity 0.5s ease-in;
}

#submenu-1 li ul svg polyline.st0 {
  stroke-dasharray: 388px;
  stroke-dashoffset: 388px;
}

#submenu-1 li:hover>ul svg polyline.st0 {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease-in;
}

#submenu-1 ul {
  list-style: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: relative;
  width: 900px;
  float: left;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  max-height: 0;
  transition: max-height 0.5s ease-out;
  z-index: 600;
  padding: 10px 0px 0px 0px;
}


a:link,
a:visited,
a:active {
  color: white;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "montserrat";
  font-weight: 800;
  font-size: 25px;
  letter-spacing: 2px;
  line-height: 1;
}

a:hover {
  color: grey;
}

.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="menu">

    <ul id="submenu-1">
      <li id="m"><a href="#">what brings<br>you here?</a>

        <ul>
          <svg viewBox="0 0 900 50">
            <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>
            <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>
            <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>
            <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>
          </svg>
    
        </ul>
        
      </li>
    </ul>
  </div>
</div>
...