为什么我的 css 变换动画不能在 nextjs 上工作？

发布于 2025-01-13 17:33:39 字数 975 浏览 5 评论 0原文

我过去曾多次实现类似的代码，没有任何问题。但现在我正在研究 NextJS，我相信配置中有一些东西，或者可能是我正在做的事情，但是悬停或单击时简单的小反弹效果根本不起作用。 Next js 主要是静态站点生成，但这不会改变编译后的 css（我使用的是 sass）在客户端上的运行方式。

<li className={styles.navbar__link}>
              <a href="#" className={styles.buttonsecondary}>Get Started</a>
            </li>
          </ul>

// css

@keyframes bounceup {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translateY(-.3rem);
    }
}

.buttonsecondary:link, .buttonsecondary:visited {
    background-color: var(--main-color-lightother);
    padding: .8rem 1.6rem;
    border-radius: 1.1rem;
    color: var(--main-color-darker) !important;
    transition: all 0.3s;
}

.buttonsecondary:hover, .buttonsecondary:active {
    transform: translateY(-.3rem);
}

我还尝试使用关键帧动画并将其包含在内，但都不起作用。

我还必须包括 !important，因为这是我唯一能够选择 ButtonSecondary 类的原因，因为另一个奇怪的情况。到目前为止，我的页面上只有几个导航链接，但这一个给我的简单样式带来了麻烦。

原文

I have implemented similar code a number of times before in the past with no problem. But now I'm working on NextJS and I believe there is something in the config or maybe in what I am doing but the simple little bounceup effect when hovering or clicking doesn't work at all. Next js is primarily static site generation, but that shouldn't change how the compiled css (I'm using sass) is running on the client.

<li className={styles.navbar__link}>
              <a href="#" className={styles.buttonsecondary}>Get Started</a>
            </li>
          </ul>

// css

@keyframes bounceup {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translateY(-.3rem);
    }
}

.buttonsecondary:link, .buttonsecondary:visited {
    background-color: var(--main-color-lightother);
    padding: .8rem 1.6rem;
    border-radius: 1.1rem;
    color: var(--main-color-darker) !important;
    transition: all 0.3s;
}

.buttonsecondary:hover, .buttonsecondary:active {
    transform: translateY(-.3rem);
}

I also tried using a keyframe animation and including that instead but neither worked.

I also had to include !important as it was the only was I was able to select the buttonsecondary class due to another weird situation. I only have this a few nav links on my page so far but this one is giving me trouble with simple styling.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨的味道风的声音 2025-01-20 17:33:39

// css

@keyframes bounceup {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translateY(-.3rem);
    }
}

.buttonsecondary:link, .buttonsecondary:visited {
    background-color: var(--main-color-lightother);
    padding: .8rem 1.6rem;
    border-radius: 1.1rem;
    color: var(--main-color-darker) !important;
    transition: all 0.3s;
}

.buttonsecondary:hover, .buttonsecondary:active {
    animation-name: bounceup;
  animation-duration: 0.3s;
}

// css

@keyframes bounceup {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translateY(-.3rem);
    }
}

.buttonsecondary:link, .buttonsecondary:visited {
    background-color: var(--main-color-lightother);
    padding: .8rem 1.6rem;
    border-radius: 1.1rem;
    color: var(--main-color-darker) !important;
    transition: all 0.3s;
}

.buttonsecondary:hover, .buttonsecondary:active {
    animation-name: bounceup;
  animation-duration: 0.3s;
}

回复收藏 0 原文

~没有更多了~