Question

我正在尝试使用CSS来使onClick变得流畅。当我单击按钮时，此.mobileNav类将通过jQuery addClass方法添加。效果很好。

但是CSS过渡效果不佳

这是到目前为止尝试过的

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

CSS过渡不顺利。我的代码有什么问题？

Answer 1

我认为您没有将类.menu添加到button中，这就是transition无法正常工作的原因，因为transition已添加到{{1 }}不要.menu，好吧，它现在在这里起作用，让我知道它是否也对您有用

.menu.mobileNav

$(".menu").on('click', function () {
    $(".menu").addClass('mobileNav');
});

body {
  width: 100px;
  margin: 20px;
  position: relative
}

Answer 2

诸如left，top，bottom和right之类的属性不是硬件加速的。这意味着您的CPU需要在没有GPU的帮助下自行执行此转换（如果您通常有一个女巫）

在这种情况下，我将仅使用transform巫婆使用硬件加速：

.menu { position: absolute; top:60px; transform: translateX(-250px); transition:transform 1s linear; }
.menu.mobileNav { transform: translateX(0) }

看看这些家伙answer

单击按钮时CSS过渡不流畅

2 个答案: