时间戳

首页 > 解决方案 > 单击按钮时CSS过渡不平滑

css - 单击按钮时CSS过渡不平滑

问题描述

我正在尝试使用 CSS 制作平滑的 onClick 效果。当我单击按钮时，这个.mobileNav类将通过 jQueryaddClass方法添加。这工作正常。

但是 CSS 过渡效果不佳

这是迄今为止尝试过的

<button class="mobileNav">button</button>
    
.menu {
  position: absolute;
  top:60px;
  right:-250px;
  transition:right 1s linear;
}
.menu.mobileNav {
  right:0;
}

CSS 过渡不平滑。我的代码有什么问题？

标签： csscss-transitionsbuttonclick

解决方案

我认为您没有将课程添加.menu到您的button，这就是为什么transition不起作用，因为transition被添加到.menunot .menu.mobileNav，好吧，它现在在这里工作，让我知道它是否也适合您

$(".menu").on('click', function () {
    $(".menu").addClass('mobileNav');
});
body {
  width: 100px;
  margin: 20px;
  position: relative
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .menu {
    position: absolute;
    top:60px;
    right:-250px;
    transition: right 1s linear;
  }
  
  .menu.mobileNav {
    right: 0;
  }
</style>

<body>
  <button class="menu">button</button>
</body>

推荐阅读