Необычная анимация svg path

271

01 августа 2017, 17:17

Как можно сделать точно такой же hover-эффект, как на этом сайте при наведении на svg-иконку закрытия меню?

HTML:

<svg version="1.1" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='50' height='50' x="0px" y="0px"  viewBox="0 0 52 51.8" xml:space="preserve">
  <path d="M7.7,7.8L26,26.1"/>
  <path d="M7.5,44.5l17-17"/>
  <path d="M44.4,44.5L26,26.1"/>
  <path d="M44.4,7.7L30.2,21.9"/>
</svg>

CSS:

svg {
    fill: none;
}
path {
    fill: none;
    stroke: #3498db;
    stroke-width: 10;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transition: 1s;
}

Была идея сделать как-то так, но не очень она рабочая:

var svg = document.querySelector(".elem");
    var lines = svg.querySelectorAll("path");
$("svg").hover(function() {
        for (let i = 0; lines.length > i; i++) {
            let path = lines[i].getTotalLength();
            lines[i].style.strokeDashoffset = path;
            lines[i].style.strokeDasharray = path;
        }
        var int = setInterval(draw, 150);
        function draw() {
            for (let i = 0; lines.length > i; i++) {
                let path = lines[i].getTotalLength();
                if (path <= 0) {
                    clearInterval(int);
                } else {
                    path += 20 * (-1);
                    lines[i].style.strokeDashoffset = 0;
                }
            }
        }
    });

Answer 1

Можно сделать так:

$('.elem').on('mouseenter', function() { 
  var delay = 30; 
  var paths = $(this).find('path'); 
  paths.each(function() { 
    var line = this; 
    var length = this.getTotalLength(); 
    setTimeout(function() { 
      line.style.strokeDasharray = length; 
      line.setAttribute('class', 'animated'); 
      line.style.strokeDasharray = -length; 
      line.style.strokeDashoffset = -length; 
      setTimeout(function() { 
        line.style.strokeDasharray = -length * 2; 
        line.style.strokeDashoffset = -length * 2; 
      }, 350); 
      setTimeout(function() { 
        line.setAttribute('class', ''); 
        line.style.strokeDasharray = length; 
        line.style.strokeDashoffset = '0'; 
      }, 650); 
    }, delay); 
    delay = delay + 30; 
  }); 
});

svg { 
  width: 26px; 
  height: 26px; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
} 
 
path { 
  stroke: #000; 
  stroke-width: 5px; 
} 
 
svg path.animated { 
  transition: all 0.3s ease; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<svg version="1.1" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='50' height='50' x="0px" y="0px" viewBox="0 0 52 51.8" xml:space="preserve"> 
  <path d="M7.7,7.8L26,26.1"/> 
  <path d="M7.5,44.5l17-17"/> 
  <path d="M44.4,44.5L26,26.1"/> 
  <path d="M44.4,7.7L30.2,21.9"/> 
 </svg>