过渡效果 - 尝试创建最简单的滑出导航

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中的Visibility属性中使用过渡效果来自＆＃34; none＆＃34;到＆＃34;阻止＆＃34; ？

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

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);

Answer 2

我试图尽可能简单地为你做这件事。此策略使用css转换来显示和隐藏幻灯片。

// --------------------------
// Initialize the slideout and return a function that when called
// toggles the slideout
// --------------------------
var toggleSlideShow = (function(slideOutId) {
  var mySlideOut = document.getElementById(slideOutId);

  // --------------------------
  // utility to toggle the required classes to animate the slideout
  // --------------------------
  var _toggle = function() {
    mySlideOut.querySelector(".mainOverlay").classList.toggle("slideOutShow");
    mySlideOut.querySelector(".slideOutContainer").classList.toggle("slideOutShow");
  };
  // --------------------------

  // --------------------------
  // add handler to close slideout on overlay click
  // --------------------------
  mySlideOut.querySelector(".mainOverlay").addEventListener("click", function() {
    if (this.classList.contains("slideOutShow")) { _toggle(); }
  });
  // --------------------------

  return _toggle;

})("slideOut1");
// --------------------------


// --------------------------
// add handler to toggle slideout on button click
// --------------------------
document.getElementById("slideToggler").addEventListener("click", function() {
  toggleSlideShow();
});
// --------------------------

.mainContainer {
  margin: 1em;
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/05/84/44/058444b369252478964babaf2361fb15.jpg");
  background-size: cover;

  /* important styles */
  position: relative;
  overflow: hidden;
}

.mainOverlay {
  min-height: 500px;
  background-color: #000;

  /* important styles */
  opacity: 0;
  transition: opacity .5s ease;
}

.slideOutContainer {
  position: absolute;
  top: 1em;
  width: 200px;
  min-height: 50px;
  background-color: aliceblue;
  transition: transform .5s ease;
  transform: translateX(-200px);
}

.slideOutContainer.slideOutShow { transform: translateX(0px); }
.mainOverlay.slideOutShow { opacity: 0.5; }

<button id="slideToggler">toggle</button>

<div id="slideOut1" class="mainContainer">
  <div class="mainOverlay"></div>
  <div class="slideOutContainer">
    <div style="text-align: center;">contents of slide</div>
  </div>
</div>

Answer 3

对我来说，滑出导航菜单的最佳方法是将其放在屏幕上。像这样：

这些是你需要记住的事情：

1. 将侧面菜单放在屏幕上
2. 使用绝对位置（或固定，取决于您的要求）
3. transition left css属性。
4. 仅使用javascript切换更改left属性的类或css规则。

这是一个非常简单的演示： http://codepen.io/sospedra/pen/ezNWgW