fadeIn效果，當scroll 到該物件時，但假設該物件有定位，則會錯誤

Question

var eles = Array.prototype.slice.call(document.querySelectorAll('.animated'));
document.addEventListener('scroll', animatedFadeInUp);
animatedFadeInUp();

function animatedFadeInUp() {
  eles = eles.filter(function(ele) {
    var rect = getRect(ele);
    if (rect.isVisible) {
      ele.classList.add('slideUp');
      return false;
    }
    return true;
  });
  if (eles.length <= 0) document.removeEventListener('scroll', animatedFadeInUp);
}

function getRect(ele) {
  var inHeight = window.innerHeight;
  var rect = ele.getBoundingClientRect();
  rect.isVisible = rect.top - inHeight < 0;
  // rect.isBottom = rect.bottom - inHeight <= 0;
  return rect;
}

如果物件沒有定位（position），則不會被影響
但是假設有定位，他會先移動到一個很怪的角度，之後才會變回去該有的位置

@keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

因為我的動畫有 transform，
我定位的時候也是用transform
就像是：

position: absolute;
left:15px;
top:50%;
transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);

要如何做到：即便有定位，也能夠使用這個動畫？！且會到正確位置？

Answer 1

确实是同一个transform导致的，动画过程中先会回到20%的地方，

其实你的20%对应到现在的话，其实就是-50 + 20 = -30%，相应的结束为止也需要改成(0, -50%, 0)