javascript - 过渡效果——尝试打造最简单的滑出式导航

Question

在此先感谢您的支持...我正在尝试制作一个简单的滑出式导航

因此，在没有任何 javascript 经验的情况下，在尝试为滑出导航找到一个简单的解决方案 2 天后，我只能遇到一些太大的脚本……有些是 20kb 或更多，或者两个实现起来很复杂。

我相信简单是最终的复杂，我知道应该有更好的方法，所以经过许多小时的尝试......我能够想出这个我从不同来源获得的解决方案。

<script>
var slider = document.querySelector('.slider');
var overlay = document.querySelector('.overlay');

function openSlide() {
if (slider.classList.contains('closed')) {
  slider.classList.remove('closed');
  slider.classList.add('open');
  overlay.classList.remove('no-display');
} else {
  slider.classList.remove('open');
  slider.classList.add('closed');
  overlay.classList.add('no-display');
}
}

function closeSlide() {
slider.classList.remove('open');
slider.classList.add('closed');
overlay.classList.add('no-display');
}

</script>

我的问题是...

如何改进我的代码？ (不要让理解变得复杂 - 至少对我而言)

有没有办法在 .overlay 的可见性属性中使用从“无”到“ block ”的过渡效果？

你可以在这里看到一个例子......

https://jsfiddle.net/8na6t0dg/2/

谢谢你的帮助。

Answer 1

如果你只有切换滑动按钮那么你可以只使用这个代码:

var slider = document.querySelector('.slider');
var overlay = document.querySelector('.overlay');
var opened = false;

function toggleSlide() {
if (!opened) {
    slider.classList.remove('closed');
    slider.classList.add('open');
    overlay.classList.remove('no-display');
  } else {
    slider.classList.remove('open');
    slider.classList.add('closed');
    overlay.classList.add('no-display');
  }
  opened = !opened;
}

并且无法在此属性上使用转换。超时后立即更改不透明度是一个很好的解决方案:

overlay.classList.add('no-display');
setTimeout(function(){
   overlay.style.opacity = '1';
},0);