Координаты Animate Svg Path D при активном или зависании - PullRequest
Новая
       20

Координаты Animate Svg Path D при активном или зависании

1 голос
/ 30 сентября 2019

EffectAnim

Я покончил с собой, пытаясь сделать анимацию с помощью SVG, но я не могу понять, как она работает, и не могу получить хорошую информацию об этом.

Что я пытаюсь сделать, так это то, что когда элемент Li активен или находится в режиме наведения, SVG изменяет строки точек за время 1 с.

Я пытался с помощью CSS иЯ сделал что-то, но я не могу заставить их реагировать.

Идея состоит в том, чтобы изменить координаты d="M 299 50 C 299 50 303 22 272 22 L 269 22 C 269 22 241 22 241 50 C 241 78 270 78 270 78 L 272 78 C 303 78 299 50 299 50 Z" на координаты d="M 300 0 C 300 0 301 22 272 22 L 28 22 C 28 22 0 22 0 50 C 0 78 29 78 29 78 L 272 78 C 301 78 300 100 300 100 Z" во время создания Hover или того, что Li активно. Принимая во внимание отзывчивый дизайн.

Если у вас есть какие-либо документы, по которым вы можете поддержать меня, было бы отлично 

<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <defs>
    <style>
      .cls-1 {
        fill: #29abe2;
      }
    </style>
  </defs>
  <title>Mesa de trabajo 1</title>
  <path class="cls-1" d="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z">
    <animate 
      attributeName="d"
      from="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z"
      to="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" 
      dur="5s"
      repeatCount="indefinite"/>
  </path>
</svg>

1 Ответ

2 голосов
/ 01 октября 2019

Мне кажется, я не правильно объясняю себя. Я хочу, чтобы эффект запускался, когда ли введен в :Hover или когда :active

:active применяется к ссылкам. И у вас не может быть активной ссылки, если вы все равно не зависаете. Поэтому я предполагаю, что вы имеете в виду, когда выбран элемент меню / вкладки.

Вот как это сделать с небольшим количеством CSS и небольшим количеством Javascript. Все, что делает Javascript - это устанавливает правильный <li> в активный, добавляя класс «активный» к тому, на который вы кликаете. Вам не нужно использовать этот точный код для этого. Например, вы можете контролировать, какой элемент <li> имеет этот класс, используя библиотеку UX, такую ​​как Angular или Vue.

Как все остальное работает, объясняется в самом коде.

Надеюсь, этопомогает. 

// Add a click handler for each <li>
document.querySelectorAll("ul.menu li").forEach(function(item) {
  item.addEventListener("click", function(evt) {
    // When user clicks on an LI, we give it the class "active" and
    // remove the class "active" from the last one (if any) that had it.
    clearActive();
    evt.target.closest("li").classList.add("active");
  })
});

// Remove the class "active" from all <li> elements
function clearActive() {
  document.querySelectorAll("ul.menu li").forEach(function(item) {
    item.classList.remove("active");
  });
}
.cls-1 {
  fill: #29abe2;
}

/* Hide the second path ("open") by default. */
ul.menu li svg .open {
  display: none;
}

/* When SVG has class "active" we hide the animated path, and show the second static one. */
ul.menu li.active svg .anim {
  display: none;
}

ul.menu li.active svg .open {
  display: block;
}



ul.menu {
  list-style: none;
  width: 200px;
}
<ul class="menu">
  <li>
    <svg viewBox="0 0 300 100">
      <path class="cls-1 anim" d="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z">
        <animate 
          attributeName="d"
          to="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" 
          dur="1s"
          begin="mouseover"
          fill="freeze"/>
        <animate 
          attributeName="d"
          to="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z"
          dur="1s"
          begin="mouseout"
          fill="freeze"/>
      </path>
      <!-- A second version of the path that has the destination shape. We will display this when SVG has the "active" class. -->
      <path class="cls-1 open" d="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" />
    </svg>
  </li>
  
  <li>
    <svg viewBox="0 0 300 100">
      <path class="cls-1 anim" d="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z">
        <animate 
          attributeName="d"
          to="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" 
          dur="1s"
          begin="mouseover"
          fill="freeze"/>
        <animate 
          attributeName="d"
          to="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z"
          dur="1s"
          begin="mouseout"
          fill="freeze"/>
      </path>
      <path class="cls-1 open" d="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" />
    </svg>
  </li>
  
  <li>
    <svg viewBox="0 0 300 100">
      <path class="cls-1 anim" d="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z">
        <animate 
          attributeName="d"
          to="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" 
          dur="1s"
          begin="mouseover"
          fill="freeze"/>
        <animate 
          attributeName="d"
          to="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z"
          dur="1s"
          begin="mouseout"
          fill="freeze"/>
      </path>
      <path class="cls-1 open" d="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" />
    </svg>
  </li>
  
</ul>
...