Since the element can vary its width depending on the content it has, I don't know how to get its width in px.

Here is the basic, simplified, structure:

// React ponent 

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

I've tried a lot of things with no results.

Thanks!

Since the element can vary its width depending on the content it has, I don't know how to get its width in px.

Here is the basic, simplified, structure:

// React ponent 

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

I've tried a lot of things with no results.

Thanks!

• javascript
• css
• reactjs
• styled-ponents

• 1 What happens when you use the value 100%? – DannyXCII Commented May 16, 2020 at 21:45

1 Answer 1

You can get the width by using the getBoundingClientRect() function, which will return an object of the element's attributes. With styled ponents, you will need to reference the element using the useRef hook or another referencing method in order to call getBoundingClientRect().

referencedElement.getBoundingClientRect()
// Return the width by calling referencedElement.getBoundingClientRect().width