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

Question

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

Cod*_*nds 17 html javascript animation svg css-transitions

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

我已经验证了我在transition(.fixed)期间添加的类确实已应用,因为它们是我使用的更改SVG的大小.因此,当SVG改变大小时,由于某种原因,我仍然无法将CSS转换为动画.您可以在下面的GIF中查看此失败动画.

页脚没有动画:

我认为需要转换代码的元素是SVG本身,它们是类areaSVG,因为它们是从更改max-height: 18vh到的那些max-height: 9vh.但是,当我添加一些动画代码时.areaSVG,它不起作用,所以也许我是错误.这是我尝试添加到.areaSVG失败的初始SVG()设置的转换代码:

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

Run Code Online (Sandbox Code Playgroud)

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

Codepens

这是您应该解决的最简单,最小化的版本,因为它没有媒体查询(请求@Eric N:http://codepen.io/ihatecoding/pen/LREOPW
这是完整的codepen,有媒体查询: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 parent(.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;

}

Run Code Online (Sandbox Code Playgroud)

接下来,JS运行然后显示元素(仍在第一部分):

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


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

Run Code Online (Sandbox Code Playgroud)

小页脚(在第一部分下方)

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

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

Run Code Online (Sandbox Code Playgroud)

使用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

Run Code Online (Sandbox Code Playgroud)

任何帮助,将不胜感激!谢谢!