jQuery Toggle Transform 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);
}