Question

我正在尝试使用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

如您所见，一个小弹跳可以很好地上下滑动。这是我想要达到的目标（正好相反）：）

Answer 1

这与您编写路径的方式有关。必须使用（如果可能）相同数量的曲线和相同位置绘制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>

Snap SVG / CSS悬停是从左到右，而不是从下到上？

1 个答案: