野生动物园中的过渡变换看起来很糟糕/摇摇欲坠/口吃

Question

我有一些基于用户滚动的功能，沿页面上下移动元素（模仿滚动效果。）

为了使它更顺畅，我正在使用transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);（带有适当的vender前缀）。

问题在于，除了Safari中，它也很棒。那里的-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);导致动画混为一谈并产生振动效果。我已经阅读了很长时间的阅读，并尝试设置透视属性和背面属性，但没有运气。

有没有办法解决此问题/有人看到了吗？Safari不允许过渡转换吗？

理解问题的任何帮助都将是惊人的。

我发现这个小提琴http://jsfiddle.net/3yfspjlt/显示了我的问题。如果一开始不会眨眼，请上下滚动。

出于好奇，这是我的代码，但是我对为什么在Safari中发生此错误然后只是我的特定用例更加好奇。（尽管我当然是在试图找到答案）。

JS文件

getElementPositions: function(){ 
    var de = document.documentElement;
    var windowHight = window.innerHeight; 
    var page = scrollAnimations.getTopBottom(scrollAnimations.featurePage, de, windowHight);
    var profile = scrollAnimations.getTopBottom(scrollAnimations.featureProfile, de, windowHight);
    var barOne = scrollAnimations.getTopBottom(scrollAnimations.firstBar, de, windowHight);
    var barTwo = scrollAnimations.getTopBottom(scrollAnimations.secondBar, de, windowHight);
    var barThree = scrollAnimations.getTopBottom(scrollAnimations.thirdBar, de, windowHight);
    scrollAnimations.pageDiff = page.diff;
    scrollAnimations.pageStartP = page.top - (page.padding -100);
    scrollAnimations.profileDiff = profile.diff;
    scrollAnimations.profileStartP = profile.top - (profile.padding/1.3); 
    scrollAnimations.barOneDiff = barOne.diff;
    scrollAnimations.barOneStartTop = barOne.top - (barOne.padding/1.3); 
    scrollAnimations.barTwoDiff = barTwo.diff;
    scrollAnimations.barTwoStartTop = barTwo.top - (barTwo.padding/1.3);
    scrollAnimations.barThreeDiff = barThree.diff;
    scrollAnimations.barThreeStartTop = barThree.top - (barThree.padding/1.3);
    scrollAnimations.startScrollAnimations();
  },
  getTopBottom: function(el, de, windowHight) {
    var result = {};
    var box = el.getBoundingClientRect();
    result.top = box.top + window.pageYOffset - de.clientTop;
    result.bottom = box.bottom + window.pageYOffset - de.clientTop;
    result.diff = result.bottom - result.top;
    result.padding = windowHight - result.diff;
    return result;
  },
scrollPage: function(scrollPos){
    var pageHeight = scrollAnimations.pageScroll.offsetHeight;
    var scrollDiff = scrollPos - scrollAnimations.pageStartP;
    var realPos = -scrollDiff/scrollAnimations.pageDiff;
    var lengthLeft = pageHeight - scrollAnimations.pageDiff;
    if (realPos > 0.09) {
      transY = 0.09 * lengthLeft;
    } else if(realPos < -1) {
      transY = -1 * lengthLeft;
    } else {
      transY = realPos * lengthLeft;
    }
    scrollAnimations.pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + transY + 'px,0); -moz-transform:translate3d(0,' + transY + 'px,0); -ms-transform:translate3d(0,' + transY + 'px,0); transform:translate3d(0,' + transY + 'px,0);'); 
      if(Modernizr.orientation) {
        scrollAnimations.pageScroll.style.transformStyle='preserve-3d';
        scrollAnimations.pageScroll.style.webkitTransition='0.4s cubic-bezier(0.49, 0.47, 0.63, 0.85)';
      }
  },

css（我也尝试使用全部）

#page-scroll {
    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
    -moz-transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
    -ms-transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
    -o-transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
    transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
  }

Answer 1

我不是100％确定您要完成的工作，但是在下面尝试这样的事情...？让我们知道这是否有所帮助，如果不详细说明您的问题，请或添加更多的源代码。

/* add your translateY values */
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
-moz-transition: all 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
transition: all 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);