通过添加类

问题描述

我需要使用变换转换属性来解决简单的滑动面板的帮助。我有一个滑动菜单栏，可从左向右滑动（单击L）。但是，通过单击单击R添加类后，它会更改转换：translateX从-100％更改为100％，起点不在预期的屏幕外，而是在单击后第一次出现在屏幕内。我该怎么做才能从屏幕外滑动？

$('.click').click(function () {
$('#panel').removeClass();
$('.wrap').toggleClass('clicked');
})
$('.click1').click(function () {
$('#panel').addClass('right');
$('.wrap').toggleClass('clicked');

})

#wrap {
  width: 100%;
}

#panel {
  width: 100px;
  background: red;
  display: flex;
  position: fixed;
  z-index: 999;
  top: 0;
  left: -1px;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: 0.45s;
  height: 100%;
  transform: translateX(-100%);
}

#panel.right {
  transform: translateX(100%);
  right: -1px;
  left: inherit;
}

.wrap.clicked #panel {
  transform: translateX(0);
}

.click {
  position: relative;
  right: -150px;
}

.click1 {
  position: relative;
  right: -200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">

  <div id="panel">
  </div>
  <a class="click">click L</a>
<a class="click1">click R</a>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）