如何使用 CSS Translate 获得 Javascript 偏移量？

问题描述

我正在开发一个 TopBar，它在页面加载 2 秒后从顶部滑入。对于动画中的幻灯片，我使用了一些 CSS 关键帧，“transform: TranslateY”从 -100% 到 0%。 TopBar 具有“位置：固定”，但我希望当 TopBar 进入时，我的主要内容会动态向下滑动。为此，我在 javascript 中编写了一个函数，该函数可以返回 TopBar 的可见高度，并将其应用于我的主要内容的顶部边距属性。这是一些代码：

#topbar{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.topbar-animation{
  animation: topbarIn 1s ease-in-out;
}

@keyframes topbarIn {
  0%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0);
  }
}

2秒后添加类topbar-animation，topbar从顶部滚动。

这是我的 javascript：

var topbar = document.getElementById("topbar");
var mainNav = document.getElementById("main-navbar"); //main-navbar is my top element 

setTimeout(function(){
  topbar.style.display = 'block';
  topbar.classList.add("topbar-animation");
  mainNav.style.marginTop = topbar.offsetHeight + topbar.offsetTop + 'px';
},2000);

问题是 topbar.offsetTop 没有随着平移动画动态变化，它给了我 0px，这是动画的终点。有没有办法可以获取随 CSS 动画变化的顶栏（即屏幕外）的动态高度？

解决方法

const getTranslateY = (e) => {
    let translateY = 0;
    let transformCss = e.target.style.transform;
    let matchCase = /(-?[0-9\.]+)/g;
    if(transformCss !== null && transformCss.match(matchCase)){
        translateY = transformCss.match(matchCase)[1];
    }
    let finalAxisValue = translateY < 0 ? translateY * -1 : translateY;
    return parseInt(finalAxisValue);
}

获取元素的 translate 属性对我有用。
注意： 在我的情况下，我有内联样式翻译属性

javascript