物件定位與 fadeUp動(dòng)畫，會(huì)先移到錯(cuò)誤的位置，再?gòu)椈厝フ_位置

這是我的js

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

@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);
  }
}

如果物件沒(méi)有定位（position），則不會(huì)被影響
但是假設(shè)有定位，他會(huì)先移動(dòng)到一個(gè)很怪的角度，之後才會(huì)變回去該有的位置

因?yàn)槲业膭?dòng)畫有 transform，
我定位的時(shí)候也是用transform 50%
就像是：

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

這樣我要怎麼讓他原本就是正確的位置？即便 slideUp？不會(huì)先到一個(gè)很怪的位置，動(dòng)畫結(jié)束後再?gòu)椈厝ピ疚叶ㄎ坏奈恢茫?/p>