如何使用 CSS Translate 获取 Javascript 偏移量？答案

【问题标题】：How to get Javascript Offset with CSS Translate?如何使用 CSS Translate 获取 Javascript 偏移量？
【发布时间】：2021-04-21 21:30:32
【问题描述】：

我正在开发一个在页面加载 2 秒后从顶部滑入的 TopBar。对于动画中的幻灯片，我使用了一些 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 动画变化的顶部栏（即屏幕外）的动态高度？

【问题讨论】：

标签： javascript css

【解决方案1】：

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

获取元素的翻译属性对我有用。
注意： 就我而言，我有内联样式的翻译属性

【讨论】：

嗨，我试过了，但这不适用于我的动画。也许我做错了什么。我将“getTranslateY”添加到我的 mainNav.style.marginTop，替换了 topbar.offsetTop。我将 translate 属性添加为内联样式。