SVG会更改大小，但在滚动转换时不会生成动画

Question

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

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

页脚没有动画：

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

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

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

Codepens

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

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

选择器

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

• 整个页脚：#indexFooter
• SVG家长：.ey-col-svg
• SVG本身：.areaSVG

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

• 整个固定页脚：#indexFooter.fixed
• 固定的SVG家长：.ey-col-svg.fixed
• 固定的SVG本身：.areaSVG.fixed

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

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

大页脚（第一部分）

初级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;

}

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

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


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

小页脚（在第一部分下方）

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

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

使用Javascript / jQuery的

如果你想看到它，这是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

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

Answer 1

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

这并不完美：改变宽度存在一些问题，但我相信你提出的问题已得到回答。要解决其他问题，您必须查看css以查看某些元素是否未更改display属性 - 这可能会影响您的转换。修复宽度也应该有所帮助，因此它们不依赖于文本大小 - 当文本变小时它会发生变化，因此其他元素的位置也会随之改变。

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

!important

我必须这样做：

.fixed

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

我还在文本元素中添加了过渡，并且必须解开放在那里的一些font-size页边距。

一般来说，代码可以在以下几个方面进行改进：

• 不要将内联样式与css样式表混合，因为很难知道来自哪里
• 尝试将公共类放在css文件中彼此接近，这样当您添加vh时，更容易看出有什么区别 例如
• 不同的单位有不同的用途。不应在!important中将!important定义为相对于屏幕大小的{{1}}，并且可以 文字不可读
• 谨慎使用{{1}}，或者更好地使用{{1}}。如果你修复了迫使你使用的问题，代码通常会更清晰 首先是{{1}}

Answer 2

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

我做的第一件事就是清除那些看起来未使用的代码...显然是由于之前的多次尝试。

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

我设法修复动画的“跳跃效果”（我从评论中的the last CodePen you posted开始），使动作看起来非常流畅。我主要是用CSS做的。

结果

请参阅on CodePen和on my server

完美的结果：

• Chrome 53
• Opera 40
• FireFox 49

眼睛图标比屏幕低30％：
（但可能看起来像预期！）：

• Safari for Windows 5.1.7
  我无法在Safari 10上测试它，因为我没有任何Apple设备。
• 三星浏览器（三星Galaxy S3）

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

• 适用于Android的Chrome（三星Galaxy S3）

动画中的陌生感：
（但最小化和扩展状态都可以）

• Explorer 11 （我讨厌IE！）

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

其他浏览器support viewport units，包括IOS Safari 10.

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

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

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

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

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

<强> 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>

要添加的部分，使用polyfill ：
（在</body>之上）

<!-- 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 ：

$(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 ：

* {
    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;
}

Answer 3

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;

}

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

我希望这会有所帮助

Answer 4

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

1. 在CSS中添加此类：

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

2. 我已经编辑了你的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)");
   }