javascript - jQuery Toggle 转换 translate3 值

Question

我有一个 javascript 函数，它是这样的:

function toggle() {
  $('.sidebar').toggle();
}

我可以为侧边栏添加一些 CSS:

.sidebar {
  transform: translate3d(-280px, 0px, 0px);
  position: absolute;
  width: 280px;
  background: #263249;
  color: #eee;
  left: 0;
  height: 100%;
  transition: all .3s;
}

这个侧边栏现在是隐藏的，但是当我运行切换功能时，我需要它来切换这个值:

transform: translate3d(0px, 0px, 0px);

我该怎么做？

Answer 1

你可以使用 toggleClass

function toggle() {
    $('.sidebar').toggleClass('newValue');
}

.sidebar {
    transform: translate3d(-280px, 0px, 0px);
    position: absolute;
    width: 280px;
    background: #263249;
    color: #eee;
    left: 0;
    height: 100%;
    transition: all .3s;
}

.newValue {
    transform: translate3d(0px, 0px, 0px);
}