SVG会更改大小，但不会在滚动过渡时设置动画

I have a footer/row of SVGs I made, but they fail to animate during the transition between the 1st and 2nd Sections. The code is not simple to debug because this needs to animate with js controlling the size of a few elements. A number of brave users have come up with solutions that work in Chrome and Firefox, but to get the credit, the solution must work in Safari, too.

我有一个页脚/行的SVG，但它们在第一和第二部分之间的过渡期间无法动画。代码调试起来并不简单，因为这需要使用控制几个元素大小的js进行动画处理。许多勇敢的用户提出了可在Chrome和Firefox中运行的解决方案，但为了获得信誉，该解决方案也必须在Safari中运行。

I have verified that the classes which I add during transition (.fixed) are indeed applied, because they are what I use change the size of the SVGs. So while the SVGs change sizes, for some reason I still cannot get the CSS transitions to animate. You can view this failure to animate in the the GIF below.

我已经验证过，我在转换过程中添加的类（.fixed）确实已应用，因为我使用它们会改变SVG的大小。因此，当SVG改变大小时，由于某种原因，我仍然无法将CSS转换为动画。您可以在下面的GIF中查看此失败动画。

Footer does not animate:

The elements that I believe need the transition code are the SVGs themselves, which are of class areaSVG, because they are the ones who are changing from max-height: 18vh to max-height: 9vh. However, when I add some animation code to .areaSVG, it didn't work, so maybe I'm wrong. Here is the transition code I tried adding to the intial SVG (.areaSVG) settings that failed:

我认为需要转换代码的元素是SVG本身，它们属于classSVG类，因为它们是从max-height：18vh更改为max-height：9vh的元素。但是，当我向.areaSVG添加一些动画代码时，它没有用，所以也许我错了。以下是我尝试添加到失败的初始SVG（.areaSVG）设置的转换代码：

  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
   transition: max-height 1s;

A few months ago, With the help of another, more experienced coder I added a javscript function that at some point animated the SVGs. We used JS to call window.requestAnimationFrame(startAnimation), but it no longer works. I commented the parts related to this out, but if you can think JS will be needed to get this to animate, feel free to fork the code pen and play with it. A suitable answer should make the animation work in Safari, Chrome, and Firefox.

几个月前，在另一个经验更丰富的编码器的帮助下，我添加了一个javscript函数，在某些时候动画了SVG。我们使用JS调用window.requestAnimationFrame（startAnimation），但它不再有效。我评论了与此相关的部分，但如果您认为需要JS才能使其生成动画，请随意分叉代码笔并使用它。一个合适的答案应该使动画在Safari，Chrome和Firefox中运行。

Codepens

• This is the easiest, minimized version you should troubleshoot with because it is without media queries (as requested by @Eric N:http://codepen.io/ihatecoding/pen/LREOPW

  这是您应该解决的最简单，最小化的版本，因为它没有媒体查询（根据@Eric N的要求：http：//codepen.io/ihatecoding/pen/LREOPW

• This is the full codepen, with media queries: http://codepen.io/ihatecoding/pen/ALjKKz

  这是完整的codepen，有媒体查询：http：//codepen.io/ihatecoding/pen/ALjKKz

Selectors

Selectors on the first section (on page top):

第一部分的选择器（在页面顶部）：

• The whole footer: #indexFooter
• 整个页脚：#indexFooter
• The SVG Parents: .ey-col-svg
• SVG家长：.ey-col-svg
• The SVG itself: .areaSVG
• SVG本身：.areaSVG

Selectors on the second section (after scroll 100px down):

第二部分的选择器（向下滚动100px后）：

• The whole fixed footer: #indexFooter.fixed
• 整个固定页脚：#indexFooter.fixed
• The fixed SVG Parents: .ey-col-svg.fixed
• 固定的SVG父母：.ey-col-svg.fixed
• The fixed SVG itself: .areaSVG.fixed
• 固定的SVG本身：.areaSVG.fixed

Note:when the page first loads both the SVG parent (.ey-col-svg) and the SVG itself (.areaSVG) are invisible and have the setting display:none to avoid a weird experience for the user.

注意：当页面首次加载SVG父级（.ey-col-svg）和SVG本身（.areaSVG）时，它们是不可见的，并且设置为display：none，以避免给用户带来奇怪的体验。

Here is the information about the important elements in each section:

以下是每个部分中重要元素的信息：

Big footer (on the first section)

The inital CSS (First Section)

初始CSS（第一部分）

  /* The whole footer container */
  #indexFooter {

   text-align: center;
    box-sizing: border-box;
    position: fixed;
    vertical-align: middle;
    bottom: 0;
    left: 0;
    z-index: 5000;
    max-height: 33.33vh;
    width: 100%;
}


/* The SVG container*/
.ey-col-svg {
   display: none;
   height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;

}

/* The SVG */    
.areaSVG {
   display: none;
   max-height: 18vh;  
   box-sizing: content-box;
   margin: 0;

}

Next, the JS runs and then displays the elements (still on the first section):

接下来，JS运行然后显示元素（仍然在第一部分）：

/* The SVG container*/
.ey-col-svg {
   display: block;    
}


/* The SVG*/
.areaSVG {
   display: inline-block;    
}

Small Footer (while below the first section)

After leaving the first section (when the footer should be smaller and fixed)

离开第一部分后（当页脚应该更小并固定时）

/* The SVG when low on page*/
.areaSVG.fixed {
    max-height: 9vh;
}

Javascript/jQuery

Here is the Javascript if you want to see it

如果你想看到它，这是Javascript

 $(document).ready(function() {


    var sectionIndex = 1;
    var animationName = 'indexAnimateLand';


    startAnimation();   //includes resizing background image and resizing svgs
    toggleIntroClass();  //adds css depending on section of page



    // if the user resizes the window, run the animation again, 
    // and resize the landing
    $(window).on('resize', function(){

      startAnimation();
      resizeLanding();

    });



      //sizes the landing image and the icons
      function startAnimation() {


               $('.ey-col-svg').css('display', 'block');
               $('.areaSVG').css('display', 'inline-block');

              resizeLanding(); // resize the background image
          //    window.requestAnimationFrame(startAnimation);  //animate


     }  // end start Animation




    //resizes the landing image and sets top margin for the following section
    function resizeLanding() {

          var $lndFooter = $('#indexFooter');
          var $bgLand = $('#section0img');
          var $contactSection = $('#section2Div');
          var winHeight = $(window).height();
          var lndFooterHeight = $lndFooter.height();

          bgFinalHeight = winHeight - lndFooterHeight;
          $bgLand.css("height", bgFinalHeight);

          $contactSection.css("margin-top", bgFinalHeight);

      }



      // changes the .css classes depending on section, 
      //(also triggers landing image resize if necessary)
      function toggleIntroClass(){

          var winHeight = $(window).height();
          var heightThreshold = $("#section0").offset().top;
          var heightThreshold_end  = $("#section0").offset().top + $("#section0").height();

          $(window).scroll(function() {
              var scroll = $(window).scrollTop();



          //if  user hasn't scrolled past 100px/the first section, adjust classes
          if (scroll <= 100) 
              // (scroll >= heightThreshold && scroll <  heightThreshold_end ) 
              {
                    sectionIndex = 1;

                   $('#newHeader').removeClass('fixed');
                    $('#nameBoxIndexTop').removeClass('fixed');
                    $('#indexIconsContainer').removeClass('fixed');
                    $('#indexIconsList').removeClass('fixed');
                    $('#linkCell').removeClass('fixed');
                    $('#indexFooter').removeClass('fixed');
                    $('.ey-text-content').removeClass('fixed');
                    $('.ey-col-svg').removeClass('fixed');
                    $('.ey-col-1').removeClass('fixed');
                    $('.ey-row-scale').removeClass('fixed');
                    $('.ey-nav-bar').removeClass('fixed');
                    $('.areaSVG').attr("class", "areaSVG");     

              } 

          //else if they have scrolled past the first hundred pixels/first section, adjust classes
              else {
                    sectionIndex = 2;

                    $('#newHeader').addClass('fixed');
                    $('#nameBoxIndexTop').addClass('fixed');
                    $('#indexIconsContainer').addClass('fixed');
                    $('#indexIconsList').addClass('fixed');
                    $('#linkCell').addClass('fixed');
                    $('#indexFooter').addClass('fixed');
                    $('.ey-text-content').addClass('fixed');
                    $('.ey-col-svg').addClass('fixed');
                    $('.ey-col-1').addClass('fixed');
                    $('.ey-row-scale').addClass('fixed');
                    $('.ey-nav-bar').addClass('fixed');        
                    $('.areaSVG').attr("class", "areaSVG fixed");


          }

                 }); //end inner scroll Function


    };//end intro Class toggle function






});//end document ready

Any help would be appreciated! Thanks!

任何帮助，将不胜感激！谢谢！

4 个解决方案

#1

I have a cross-browser solution here: http://codepen.io/anon/pen/EgZzxo

我在这里有一个跨浏览器的解决方案：http：//codepen.io/anon/pen/EgZzxo

It is not perfect: there are some issues with changing width, but the question you posted is answered I believe. To fix the other issues you have to look at your css to see if some elements are not changing the display property - that may mess up with your transitions. Also fixing the widths should help so they are not dependent on the text size - it will change when the text gets smaller so the position of the other elements will change with it.

这并不完美：改变宽度存在一些问题，但我相信你发布的问题已得到回答。要修复其他问题，你必须查看你的css，看看是否有些元素没有改变显示属性 - 这可能会搞砸你的过渡。固定宽度应该有所帮助，因此它们不依赖于文本大小 - 当文本变小时它会改变，因此其他元素的位置将随之改变。

The main problem you had was that .ey-row-scale.fixed had display: inline-block while .ey-row.scale hadn't. That was one thing that was breaking the transition. The other was that the transition has to be defined on the svg element, so instead of:

你遇到的主要问题是.ey-row-scale.fixed有display：inline-block而.ey-row.scale没有。这是打破转型的一件事。另一个是必须在svg元素上定义转换，因此不是：

.indexAnimateLand {
}

I had to do:

我必须做：

.indexAnimateLand svg {
}

and then it worked. Not sure exactly why, but it may be down to the inline svg not inherting the styles correctly.

然后它奏效了。不确定为什么，但它可能是内联svg没有正确地进入样式。

I also added transitions to the text elements and had to untangle some !important margins you put in there.

我还在文本元素中添加了过渡，并且不得不解开你放在那里的一些重要的边缘。

In general the code could be improved in a few areas:

通常，代码可以在以下几个方面进行改进：

• Don't mix inline styling with css stylesheets, as it is very difficult to know what comes from where
• 不要将内联样式与css样式表混合，因为很难知道来自哪里
• Try to put common classes close to each other in the css file, so it's easier to see what is the difference when you add a .fixed class for example
• 尝试将公共类放在css文件中彼此接近，因此当您添加.fixed类时，更容易看出有什么区别
• Different units serve different purposes. font-size shouldn't be defined in vh as that's relative to screen size and can make the text unreadable
• 不同的单位有不同的用途。不应该在vh中定义font-size，因为它与屏幕大小有关，并且可能使文本不可读
• Use !important sparingly, or better, don't use at all. Oftentimes the code can be cleaner if you fix the problems that force you to use !important in the first place
• 谨慎使用！重要，或者更好，根本不使用。如果您解决了迫使您使用的问题，通常情况下代码可以更清晰！首先是重要的

#2

I think I've done something nice with the animation of your navigation menu.

我想我的导航菜单动画做得很好。

The first thing I've done is to clean the code from everything that looked unused... Obviously due to the multiple previous attempts.

我做的第一件事就是从看似未使用的所有东西中清除代码......显然是由于先前的多次尝试。

Removing unused CSS classes and unused js kind of "reduced" the line amount.
I also renamed some of the remaining classes with more significative names...
Because I was lost.

删除未使用的CSS类和未使用的js类“减少”行数量。我还用一些更有意义的名字重命名了其余一些类...因为我迷路了。

I managed to fix "jumpy effect" of the animation (I started from the last CodePen you posted in comments) to make the movement look real smooth. I mostly did it with CSS.

我设法修复动画的“跳跃效果”（我从你在评论中发布的最后一个CodePen开始），使动作看起来非常流畅。我主要是用CSS做的。

The results

See on CodePen and on my server

请参阅CodePen和我的服务器

Perfect result on:

完美的结果：

• Chrome 53
• Chrome 53
• Opera 40
• 歌剧40
• FireFox 49
• FireFox 49

Eye icons are 30% below the screen on:
   (But may look like intended!):

眼睛图标在屏幕下方30％:(但可能看起来像预期！）：

• Safari for Windows 5.1.7
  I couldn't test it on Safari 10 since I don't own any Apple device.
• 用于Windows 5.1.7的Safari我无法在Safari 10上测试它，因为我没有任何Apple设备。
• Samsung browser (Samsung Galaxy S3)
• 三星浏览器（三星Galaxy S3）

Really subtile "jumpy" effect of the background image on:
   (when animation triggers)

背景图像真的具有较强的“跳跃”效果:(当动画触发时）

• Chrome for Android (Samsung Galaxy S3)
• 适用于Android的Chrome（三星Galaxy S3）

Bad strangenesses in the animation:
   (but both minimised and expanded states are ok)

动画中的不好的陌生:(但最小化和扩展状态都可以）

• Explorer 11 (I hate IE!)
• Explorer 11（我讨厌IE！）

For browsers that doesn't support viewport units (vh, vw, etc.) like Safari for windows and Samsung browser, I found Saabi, a CSS polyfill, to "almost" get it right. It's not perfect, but real close.

对于不支持视窗单元（vh，vw等）的浏览器，例如用于Windows和三星浏览器的Safari，我发现一个CSS polyfill Saabi“几乎”正确使用它。这不是完美的，但真正的接近。

Other browsers support viewport units, including IOS Safari 10.

其他浏览器支持视口单元，包括IOS Safari 10。

Notice that there are errors thrown by Saabi in console, which I didn't fixed.
I think the result is Saabi to not completely parse the CSS file.
But since it almost fixes some browsers without affecting the others (Saabi run only if the browser doesn't support viewport units)... It is worthy.
I used it on my server, but couldn't on CodePen because I didn't find a CDN.

请注意，Saabi在控制台中抛出了错误，我没有修复。我认为结果是Saabi没有完全解析CSS文件。但是因为它几乎修复了一些浏览器而没有影响其他浏览器（Saabi仅在浏览器不支持视口单元时运行）...这是值得的。我在我的服务器上使用它，但在CodePen上却没有，因为我找不到CDN。

About IE...
The problem comes from something else not (or badly) supported...
I didn't figured out what.

关于IE ......问题来自于其他不支持（或非常支持）的东西......我没弄明白什么。

I tested the js with JSHint and the CSS with CSSLint.
There are minor issues due to your SVG in the CSS checker.
There are also in the W3C markup validator, due to that.

我用JSHint测试了js，用CSSLint测试了CSS。由于CSS检查器中的SVG，存在一些小问题。由于这个原因，在W3C标记验证器中也有。

I suggest you create PNGs from your SVG to remove those errors.
These errors may be the cause of the remaning display issues on Safari for Windows and Samsung Browser. Saabi stucks on something... And I think it may be your "Eye icons" SVGs.

我建议您从SVG创建PNG以删除这些错误。这些错误可能是Safari for Windows和Samsung Browser上重新显示问题的原因。 Saabi坚持不懈......而且我认为这可能是你的“眼睛图标”SVG。

Feel free to ask about any change I made.
;)

随意询问我所做的任何改变。 ;）

HTML:

HTML：

<div id="whole">
    <div id="nav-panel" class="indexRow minimise-smooter">
        <!-- fancy icon footer -->
        <div id="nav-title" class="indexRow minimise-smooter">
            LINKS
        </div>
        <div class="nav-eyes minimise-smooter indexRow">
            <div class="indexAnimateLand indexRow">
                <div class="eye-outer-div indexRow">
                    <a class="eSVG areaAnchor indexRow" href="e.html">
                        <div class="eye-inner-div indexRow">
                            <svg class="SVG" x="0px" y="0px" viewBox="0 0 80 80" perserveAspectRatio="xMidYMid meet" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                                        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" ></feOffset>
                                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" ></feGaussianBlur>
                                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" ></feBlend>
                                    </filter>
                                </defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
                                    M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
                                    C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)" ></path>
                                <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
     C12.787,37.379,11.41,38.895,11.41,38.895z" ></path>
                                <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" ></ellipse>
                                <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" ></ellipse>
                                <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
     c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
     c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
     c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" ></path>
                            </svg>
                        </div>
                        <div class="eye-text indexRow minimise-smooter">LINK 1</div>
                    </a>
                </div>
                <div class="eye-outer-div indexRow">
                    <a class="eSVG areaAnchor indexRow" href="e.html">
                        <div class="eye-inner-div indexRow">
                            <svg class="SVG" x="0px" y="0px" viewBox="0 0 80 80" perserveAspectRatio="xMidYMid meet" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                                        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" ></feOffset>
                                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" ></feGaussianBlur>
                                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" ></feBlend>
                                    </filter>
                                </defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
                                    M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
                                    C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)" ></path>
                                <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
     C12.787,37.379,11.41,38.895,11.41,38.895z" ></path>
                                <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" ></ellipse>
                                <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" ></ellipse>
                                <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
     c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
     c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
     c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" ></path>
                            </svg>
                        </div>
                        <div class="eye-text indexRow minimise-smooter">LINK 2</div>
                    </a>
                </div>
                <div class="eye-outer-div indexRow">
                    <a class="eSVG areaAnchor indexRow" href="e.html">
                        <div class="eye-inner-div indexRow">
                            <svg class="SVG" x="0px" y="0px" viewBox="0 0 80 80" perserveAspectRatio="xMidYMid meet" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                                        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" ></feOffset>
                                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" ></feGaussianBlur>
                                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" ></feBlend>
                                    </filter>
                                </defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
                                    M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
                                    C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)" ></path>
                                <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
     C12.787,37.379,11.41,38.895,11.41,38.895z" ></path>
                                <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" ></ellipse>
                                <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" ></ellipse>
                                <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
     c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
     c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
     c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" ></path>
                            </svg>
                        </div>
                        <div class="eye-text indexRow minimise-smooter">LINK 3</div>
                    </a>
                </div>
                <div class="eye-outer-div indexRow">
                    <a class="eSVG areaAnchor indexRow" href="e.html">
                        <div class="eye-inner-div indexRow">
                            <svg class="SVG" x="0px" y="0px" viewBox="0 0 80 80" perserveAspectRatio="xMidYMid meet" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                                        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" ></feOffset>
                                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" ></feGaussianBlur>
                                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" ></feBlend>
                                    </filter>
                                </defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
                                    M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
                                    C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)" ></path>
                                <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
     C12.787,37.379,11.41,38.895,11.41,38.895z" ></path>
                                <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" ></ellipse>
                                <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" ></ellipse>
                                <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
     c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
     c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
     c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" ></path>
                            </svg>
                        </div>
                        <div class="eye-text indexRow minimise-smooter">LINK 4</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div id="fullpage">
        <article>
            <section id="section0">
                <!-- content inside of landing section  (except for icons) -->
                <div id="section0img">
                </div>
            </section>
            <section id="section2">
                <div id="section2Div">
                    <h1><a id="contact">Section 2</a></h1>
                </div>
            </section>
            <section id="section3">
                <h1>Section 3</h1>
            </section>
        </article>
    </div>
</div>

And the part to add, to use the polyfill:
(right above </body>)

以及要添加的部分，使用polyfill :(在 上方）

<!-- Saabi -->
<div id="viewport-unit-tester" style="opacity:0; height:1px; width:50vw;"></div>
<script>
// test if the browser can handle viewport unit.
// If not, it load Saabi, a polyfill CSS viewport unit.
var elem = document.getElementById("viewport-unit-tester");
var width = parseInt(window.innerWidth / 2, 10);
var compStyle = parseInt((window.getComputedStyle ?
                          getComputedStyle(elem, null) :
                          elem.currentStyle).width, 10);
//console.log(width);
//console.log(compStyle);
if(!width==compStyle){
    console.log("This browser doesn't support viewport units.");
}else{
    console.log("This browser supports viewport units.");
}

if (!Array.prototype.filter)
{
  Array.prototype.filter = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
      {
        var val = this[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }

    return res;
  };
}
</script>
<script src="saabi/tokenizer.js"></script>
<script src="saabi/parser.js"></script>
<script src="saabi/vminpoly.js"></script>

jQuery / JavaScript:

jQuery / JavaScript：

$(document).ready(function() {
    var sectionIndex = 1;

    startAnimation();   //includes resizing background image and resizing svgs
    toggleIntroClass();  //adds css depending on section of page


    // if the user resizes the window, run the animation again, and resize the landing
    $(window).on('resize', function(){
        startAnimation();
    });


    //sizes the landing image and the icons
    function startAnimation() {
        $('.eye-inner-div').css('display', 'block');
        $('.SVG').css('display', 'inline-block');
    }

    // changes the .css classes depending on section, 
    //(also triggers landing image resize if necessary)
    function toggleIntroClass(){

        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            //if  user hasn't scrolled past 100px/the first section, adjust classes
            if (scroll <= 100) {
                sectionIndex = 1;

                $('#nav-title').removeClass('minimised');
                $('#nav-panel').removeClass('minimised');
                $('.eye-text').removeClass('minimised');
                $('.eye-inner-div').removeClass('minimised');
                $('.eye-outer-div').removeClass('minimised');
                $('.nav-eyes').removeClass('minimised');
                $('.SVG').attr("class", "SVG");     
            } 

            //else if they have scrolled past the first hundred pixels/first section, adjust classes
            else {
                sectionIndex = 2;

                $('#nav-title').addClass('minimised');
                $('#nav-panel').addClass('minimised');
                $('.eye-text').addClass('minimised');
                $('.eye-inner-div').addClass('minimised');
                $('.eye-outer-div').addClass('minimised');
                $('.nav-eyes').addClass('minimised');        
                $('.SVG').attr("class", "SVG minimised");
            }
        }); //end inner scroll Function
    }//end intro Class toggle function
});//end document ready

CSS:

CSS：

* {
    padding: 0;
    margin: 0;
}
html,
body {
    margin: 0;
    padding: 0;
    height: auto;
    border: none;
    font-size: 100%;
}
h1 {
    text-align: center;
    font-size: 10vh;
    font-family: sans-serif;
}

/* ------------------------------------------------------------------------------------------------------------------------- Main sections */
#section0 {
    height:100vh;
}
#section2 {
    height:100vh;
    background-color:red;
}
#section3 {
    height:100vh;
    background-color:yellow;
}
#section0img {
    background: url('https://cdn.pbrd.co/images/cZIoMIenr.png') no-repeat;
    -webkit-background-size: 100vw 100vh;
    -moz-background-size: 100vw 100vh;
    -o-background-size: 100vw 100vh;
    background-size: 100vw 100vh;
    height:100vh;
}

/* ------------------------------------------------------------------------------------------------------------------------- Navigation panel */
#nav-panel {
    text-align: center;
    box-sizing: border-box;
    position: fixed;
    vertical-align: middle;
    bottom: 0;
    left: 0;
    z-index: 500;
    max-height: 33.33vh;
    width: 100%;
    border-top: 0.5vh solid Gray;
    border-bottom: 0.5vh solid Gray;
}
.nav-eyes {
    width: 100% !important;
    max-height: 33.33vh;
    overflow: hidden;
    text-align: center;
}
.indexRow {
    background-color: #FBFBFA;
}
#nav-title {
    max-height: 3.33vh;
    line-height: 3.33vh;
    font-size: 3.33vh;
    padding: 2vh;
}
.areaAnchor {
    text-decoration: none !important;
    text-align: center;
}
.eye-text {
    text-rendering: optimizeLegibility;
    display: block;
    text-align: center;
    white-space: nowrap;
    max-height: 8vh;
    line-height: 3.5vh;
    color: black;
    z-index: 100;
    font-size: 4vh;
    margin: 3vh 0 .5vh 0 !important;
}

/* ------------------------------------------------------------------------------------------------------------------------- SVG icons */
.eye-outer-div {
    text-align: center !important;
    width: 20%;
    /*height: 100%;*/
    margin: 0;
    padding: 0;
    display: inline-block;
}
.eye-inner-div {
    display: none;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}
.SVG {
    display:none;
    max-height: 18vh;
    box-sizing: content-box;
    margin: 0;
    -webkit-animation: SVG 1s forwards;
    animation: SVG 1s forwards;
}
@-webkit-keyframes SVG {
    100% {
        max-height: 18vh;
    }
    0% {
        max-height: 9vh;
    }
}
@keyframes SVG {
    100% {
        max-height: 18vh;
    }
    0% {
        max-height: 9vh;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- minimised */
#nav-panel.minimised {
    border-top: 0px solid Gray;
    border-bottom: 0px solid Gray;
}
#nav-title.minimised {  /* SAME AS .eye-text.minimised */
    max-height: 0;
    font-size: 0;
    color: red;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.nav-eyes.minimised {
    max-height: 9vh;
}
.eye-outer-div.minimised {
    width: 20%;
    max-height:9vh;
    padding: 0;
    margin: 0;
    display: inline-block;
    float: none;
    /*  box-sizing: border-box; */
}
.eye-text.minimised{
    max-height: 0;
    font-size: 0;
    color: red;
    margin: 0;
    padding: 0;
    line-height:0;
}
.SVG.minimised {
    -webkit-animation: SVGFixed 1s forwards;
    animation: SVGFixed 1s forwards;
}
@-webkit-keyframes SVGFixed {
    0% {
        max-height: 18vh;
    }
    100% {
        max-height: 9vh;
    }
}
@keyframes SVGFixed {
    0% {
        max-height: 18vh;
    }
    100% {
        max-height: 9vh;
    }
}
.minimise-smooter{
    -webkit-transition-property: line-height, font-size, max-height, color, padding, margin, border-bottom, border-top;
    -moz-transition-property: line-height, font-size, max-height, color, padding, margin, border-bottom, border-top;
    -o-transition-property: line-height, font-size, max-height, color, padding, margin, border-bottom, border-top;
    transition-property: line-height, font-size, max-height, color, padding, margin, border-bottom, border-top;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
/* ------------------------------------------------------------------------------------------------------------------------- END of minimised */

/* ------------------------------------------------------------------------------------------------------------------------- SVG formatting for the eyes*/
#circle-background {
    -moz-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    -webkit-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    filter: box-shadow(3px 3px 2px rgb(0, 0, 0, 0.5));
    fill: Gainsboro;
}
.fillDark {
    fill: #939598;
}
.fillWhite {
    fill: White;
}
.active #circle-background-e,
.active #sclera,
.active #pupil {
    fill: rgb(183, 36, 103);
}
.active #eyelid,
.active #iris {
    stroke: rgb(183, 36, 103);
}
.active #eyelid,
.active #iris {
    fill: white;
}
.active #circle-background-s {
    fill: rgb(82, 79, 161);
}
.eSVG #pupil {
    fill: Black;
}

#3

http://codepen.io/stephendesjardins/pen/wzEVrQ

http://codepen.io/stephendesjardins/pen/wzEVrQ

.ey-col-svg {
  height: auto;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
  position:relative;
  height:100px;
  transition:height 0.3s;
}

.fixed .ey-col-svg {
  height:50px;
}

.fixed .ey-text-content {
  display:none;
}
/*this is the container for the  bottom svg */

.areaSVG {
  box-sizing: content-box;
  margin: 0;
  position:absolute;
  height:100%;
  width:100%;
  z-index:10;
  left:0;
  top:0;

}

You can tweak it but here is the gist of it. Instead of doing transition height on the svg, do it on the parent div. Also, just add a height on it and put your svg absolute inside it. I don't see why this should be dynamic with max-height. The icons and text will never exceed more height in this particular example.

你可以调整它，但这是它的要点。而不是在svg上执行转换高度，而是在父div上执行。另外，只需在其上添加一个高度并将svg绝对放入其中。我不明白为什么这应该是max-height的动态。在此特定示例中，图标和文本永远不会超过更高的高度。

I hope this helps

我希望这有帮助

#4

Please Do the following in your link (http://codepen.io/ihatecoding/pen/LREOPW):

请在您的链接中执行以下操作（http://codepen.io/ihatecoding/pen/LREOPW）：

1. Add this class in your CSS:

   在CSS中添加此类：

   .animated {transition: all .6s ease-in-out;}
   

2. I have edited your JS code which is stated below. Kindly replace this "if else" block starting from line 75 in your codepen link's js part:

   我编辑了你的JS代码，如下所述。请从您的codepen链接的js部分中的第75行开始替换此“if else”块：

   if (scroll <= 100){
      sectionIndex = 1;
      $(".ey-col-1").css("transform","scale(1)");
   }else{
      sectionIndex = 2;
      $(".ey-col-1").addClass("animated").css("transform","scale(0.6)");
   }