Привязка SVG / CSS наведена слева направо, а не снизу вверх? - PullRequest
Новая
       16

Привязка SVG / CSS наведена слева направо, а не снизу вверх?

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

Я пытаюсь использовать Snap SVG для создания эффекта наведения на элемент.Эффект парения работает, однако анимация не работает так, как мне бы хотелось.Я бы хотел, чтобы новый путь SVG скользил вверх, а не скользил слева (я думаю, что это то, что он делает).

Вот мой код:

HTML: 

<section class="services">
    <a href="http://gccsi.website.wp.2018.360southclients.net:8080/consultancy/our-services/policy-advice/" data-path-hover="M0,342.1V38.7c253.1-51.4,513.9-51.4,767,0v303.4" class="item">
      <figure>
        <img src="http://gccsi.website.wp.2018.360southclients.net:8080/wp-content/uploads/2018/11/Advocacy_Comms.jpg" alt="Advocacy and Communication" width="737" height="639">
        <svg viewBox="0 0 767 290" preserveAspectRatio="none"><path d="M0,290C0,290,0,0,0,0C126.2,25.4,254.7,38.2,383.5,38.3C512.3,38.2,640.8,25.399999999999977,767,0C767,0,767,290,767,290"></path><desc>Created with Snap</desc><defs></defs></svg>
      </figure>
  </a>
</section>

CSS: 

section.services .item{
    width:350px;
    margin:0;
    padding:0;
    display:block
}
 section.services figure{
    position:relative;
    overflow:hidden;
    background:#fff;
    border-radius:5px;
    display:block;
    -webkit-box-shadow:0 4px 11px 0 rgba(0,0,0,.16);
    -moz-box-shadow:0 4px 11px 0 rgba(0,0,0,.16);
    box-shadow:0 4px 11px 0 rgba(0,0,0,.16);
    padding-bottom:5em;
    margin:0
}
 section.services figure img{
    position:relative;
    display:block;
    width:100%;
    height:auto
}
 section.services .item svg{
    position:absolute;
    width:calc(100% + 2px);
    bottom:0;
    z-index:10;
    -webkit-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}
 section.services .item:hover svg{
    bottom:1em
}
 section.services .item svg path{
    width:100%;
    height:auto;
    fill:#f9f ## this is pink only so I can see what's happening
}

JavaScript: 

(function() {

    function init() {
        var speed = 330,
            easing = mina.backout;

        [].slice.call ( document.querySelectorAll( 'section.services .item' ) ).forEach( function( el ) {
            var s = Snap( el.querySelector( 'svg' ) ), 
                    path = s.select( 'path' ),
                    pathConfig = {
                        from : path.attr( 'd' ),
                        to : el.getAttribute( 'data-path-hover' )
                    };

            el.addEventListener( 'mouseenter', function() {
                path.animate( { 'path' : pathConfig.to }, speed, easing );
            } );

            el.addEventListener( 'mouseleave', function() {
                path.animate( { 'path' : pathConfig.from }, speed, easing );
            } );
        } );
    }

Я создал скрипку происходящего:

https://jsfiddle.net/gw3s7z0p/7/

Код, из которого я получил это, можно найти здесь:

https://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html

Как вы можете видеть, он скользит вверх / вниз с небольшим отскоком.Вот чего я пытаюсь достичь (просто противоположное направление):)

1 Ответ

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

Это связано с тем, как вы кодируете свои пути. 2 пути должны быть нарисованы с использованием (если возможно) одинакового количества кривых и в одинаковом положении. В вашем примере у вас есть 2 кривые для рисования «хранилища» для начального пути и только одна для «целевого» пути (тот, что при наведении курсора мыши)

Вы можете попробовать что-то вроде этого: 

<section class="services">
    <a href="http://gccsi.website.wp.2018.360southclients.net:8080/consultancy/our-services/policy-advice/" data-path-hover="M0.000, 342.100 
C0.000, 240.967 0.000, 139.833 0.000, 38.700 
C253.100, -12.700 513.900, -12.700 767.000, 38.700 
C767.000, 139.833 767.000, 240.967 767.000, 342.100" class="item">
      <figure>
        <img src="http://gccsi.website.wp.2018.360southclients.net:8080/wp-content/uploads/2018/11/Advocacy_Comms.jpg" alt="Advocacy and Communication" width="737" height="639">
        <svg viewBox="0 0 767 290" preserveAspectRatio="none"><path d="M0.000, 342.100 
C0.000, 240.967 0.000, 139.833 0.000, 38.700 
C253.100, 65 513.900, 65 767.000, 38.700 
C767.000, 139.833 767.000, 240.967 767.000, 342.100

"></path><desc>Created with Snap</desc><defs></defs></svg>
      </figure>
  </a>
</section>
...