由于元素可以根据其内容改变宽度,所以我不知道如何获得其px宽度。
下面是基本的简化结构:
// React component
export const Navbar = ({ month }) => (
<NavbarStyled>
<div>
<span>{month}</span> //month is what varies in width
</div>
</NavbarStyled>
)
// NavbarStyled.js
export const NavbarStyled = styled.nav`
...
span:after{
...
animation: show 1s ease forwards;
}
@keyframes show{
100%{
transform: translateX(the_element's_width_in_px);
}
}
`
我试过很多方法都没有结果。
谢谢
1条答案
按热度按时间hfyxw5xn1#
你可以使用getBoundingClientRect() function来获取宽度,它将返回元素属性的一个对象。对于样式化组件,你需要使用useRef钩子or another referencing method来引用元素,以便调用getBoundingClientRect()。