過渡效果-嘗試創建最簡單的滑出導航

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屬性中使用從“無”到“塊”的過渡效果？

您可以在此處看到示例...

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