1

I can't get CSS to work in one particular part of my project. Works fine with other components.

index.tsx

const toggleMenu = () => {
    setMenuOpen(!menuOpen);
    
 }

return (
    ....
      
      <div className={`${styles.menu} ${menuOpen ? styles.active : ''}`}>
        <button className={styles.navTgl} onClick={toggleMenu} aria-label="toggle menu">
          <span aria-hidden="true"></span>
        </button>
        <nav className={styles.nav}>
          <ul>
            <li>Home</li>
            <li>Docs</li>
            <li>About Us</li>
          </ul>
        </nav>
      </div>
    ....

Home.module.css

.nav:before {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  content: '';
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  transition: all 500ms ease-in-out;
  clip-path: circle(30px at calc(0% + 55px) 55px);
  visibility: hidden;
  backdrop-filter: blur(10px);
}

.menu.active .nav:before { 
    visibility: visible;
    clip-path: circle(100%);
}

This is the logic of the code to open the menu box. I'm getting to open it, but the line transition: all 500ms ease-in-out; doesn't seem to work

I've tried using opacity and transform but doesn't change anything. Tried increasing trasition time and -webkit-transition as well

Improve this question
4
  • 1
    Could you provide some other details? Do you see the animation, and the nav isn't visible, or the animation doesn't work? Commented Oct 14, 2024 at 18:45
  • @SkerdiVelo The nav is visible. Only issue is the animation not coming through for this particular piece of code Commented Oct 16, 2024 at 12:06
  • @Andrew I've taken the design from codepen and this is the particular code in his css for the animation part. I'll add the link to the code with the working model. codepen.io/ahmedhrayyan/pen/EremLG Commented Oct 16, 2024 at 12:10
  • @NazlulRizan given you have this working elsewhere, I'd suggest it is not a problem with the code you've shared but rather something else causing the issue. In such a situation really the best way to find the issue is to gradually remove other pieces of code until it starts working again or start with just the working nav and add bits until in breaks. Essentially you need to isolate the real issue as, based on your explanation, the real issue is not the code you've shared. Commented Oct 21, 2024 at 11:31
Related questions
3007
How can I transition height: 0; to height: auto; using CSS?
2039
How do CSS triangles work?
669
CSS transition shorthand with multiple properties?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.