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

Question

我制作了 SVG 的页脚/行，但它们在第 1 部分和第 2 部分之间的过渡期间无法设置动画。代码调试起来并不简单，因为这需要用 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 来制作动画，请随时 fork 代码笔并使用它。 一个合适的答案应该能让动画在 Safari、Chrome 和 Firefox 中运行。

代码笔

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

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

选择器

第一部分(页面顶部)的选择器:

• 整个页脚:#indexFooter
• SVG 父类:.ey-col-svg
• SVG 本身:.areaSVG

第二部分的选择器(向下滚动 100 像素后):

• 整个固定页脚:#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 {
}

然后就成功了。不确定具体原因，但可能是内联 svg 没有正确继承样式。

我还向文本元素添加了过渡效果，并且不得不理清您放置在那里的一些 !important 边距。

总的来说，代码可以在几个方面进行改进:

• 不要将内联样式与 css 样式表混合使用，因为很难知道什么来自哪里
• 尽量将通用类放在 css 文件中，这样在添加 .fixed 时更容易看出有什么区别例如类
• 不同的单位有不同的用途。 font-size 不应在 vh 中定义，因为它与屏幕尺寸相关，并且可以使文字不可读
• 有节制地使用 !important，或者更好的是，根本不要使用。通常，如果您解决了迫使您使用的问题，代码会更清晰!important 首先