Question

这非常具有挑战性。我已经在这个codepen中获得了我想要的主要功能。 SVG主要分为3个部分，当您单击“查找更多”按钮时，中间部分会滑离其他部分。

我的主要问题是我需要它作为浏览器的完整视口。我似乎无法调整大小以匹配任何屏幕大小，我需要使用SVG作为内联元素，以便我可以做动画。

我的代码（与上面的笔相同）如下所示：

HTML

<div class="home-overlay">
    <svg width="100vw" height="100vh" viewBox="0 0 1440 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Desktop HD</title>
        <desc>Created with Sketch.</desc>
        <defs>
            <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%">
                <image x="0" y="0" height="100%" width="100%" xlink:href="https://hd.unsplash.com/photo-1465281508053-aee07fc08957" />
            </pattern>
        </defs>
        <polygon id="lines-left" fill="url(#image)" points="0 0 310 0 400 1024 0 1024"></polygon>
        <polygon id="lines-right" fill="url(#image)" points="1040 0 1440 0 1440 1024 1130 1024"></polygon>
        <polygon id="lines-center" class="lines-center" fill="url(#image)" points="310 0 1040 0 1130 1024 400 1024"></polygon>
        <polygon id="lines-center-image" class="lines-center" fill="rgba(255,255,255,0.2)" points="310 0 1040 0 1130 1024 400 1024"></polygon>

    </svg>

    <button id="clear_overlay">Find out more</button>
</div>

SCSS

.home-overlay {
z-index: 9999;
width: 100%;
height: 100%;
// position: fixed;
display: block;

&.clearitout {

    svg {
        polygon#lines-left {
            transform: translate(91px, 1024px);
            transition: transform 1s ease;
        }

        polygon#lines-right {
            transform: translate(91px, 1024px);
            transition: transform 1s ease;
        }

        polygon.lines-center {
            transform: translate(-91px, -1024px);
            transition: transform 1s ease;
        }
    }

}

button#clear_overlay {
    position: absolute;
    top: 300px;
    left: 35%;
}

}

的jQuery

$('#clear_overlay').on('click', function(){
 $('.home-overlay').addClass('clearitout');
 $('.home-overlay').fadeOut(800);
});

Answer 1

如果删除SVG的宽度和高度会怎样？

＆＃13;

jQuery('#clear_overlay').on('click', function() {
  jQuery('.home-overlay').addClass('clearitout');
  jQuery('.home-overlay').fadeOut(800);
});

＆＃13;

.home-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: hidden;
  &.clearitout {
    svg {
      polygon#lines-left {
        transform: translate(91px, 1024px);
        transition: transform 1s ease;
      }
      polygon#lines-right {
        transform: translate(91px, 1024px);
        transition: transform 1s ease;
      }
      polygon.lines-center {
        transform: translate(-91px, -1024px);
        transition: transform 1s ease;
      }
    }
  }
}
button#clear_overlay {
  position: absolute;
  top: 300px;
  left: 35%;
}
svg {
  width: 100%
}
body {
  margin: 0
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-overlay">
  <svg viewBox="0 0 1440 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Desktop HD</title>
    <desc>Created with Sketch.</desc>
    <defs>
      <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%">
        <image x="0" y="0" height="100%" width="100%" xlink:href="https://hd.unsplash.com/photo-1465281508053-aee07fc08957" />
      </pattern>
    </defs>
    <polygon id="lines-left" fill="url(#image)" points="0 0 310 0 400 1024 0 1024"></polygon>
    <polygon id="lines-right" fill="url(#image)" points="1040 0 1440 0 1440 1024 1130 1024"></polygon>
    <polygon id="lines-center" class="lines-center" fill="url(#image)" points="310 0 1040 0 1130 1024 400 1024"></polygon>
    <polygon id="lines-center-image" class="lines-center" fill="rgba(255,255,255,0.2)" points="310 0 1040 0 1130 1024 400 1024"></polygon>

  </svg>


</div>

<button id="clear_overlay">Find out more</button>

＆＃13;

笔：https://codepen.io/anon/pen/ozxrdj

使用背景图像动画全宽SVG

1 个答案: