javascript - 以模式缓慢显示/隐藏侧边栏菜单和图像

Question

我有一个脚本可以显示/隐藏侧边栏菜单和模态图像，所有功能都可以快速显示，但我需要它很慢...我找不到决定...你能帮忙吗...

<script>
    function wbsn_open() {
    document.getElementById("mySidebar").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
}

function wbsn_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}

// Modal Image Gallery
 function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;
}
</script>

Answer 1

这很简单，你会这样做:

1. 当侧边栏出现时添加一个类，例如sidebar-in 和那个类使用css添加动画效果
2. 删除sidebar-in 类，然后添加sidebar-out 类，该类将执行相反的动画

您可以为图片库做类似的事情

回答:

<script>
    function wbsn_open() {           
        var sidebar = document.getElementById("mySidebar");
        document.getElementById("myOverlay").style.display = "block";
        sidebar.style.display = "block";
        sidebar.classList.remove("sidebar-out");
        sidebar.classList.add("sidebar-in"); // Magic happens here
    }

    function wbsn_close() {
        var sidebar = document.getElementById("mySidebar");
        document.getElementById("myOverlay").style.display = "none";
        sidebar.style.display = "none";
        sidebar.classList.remove("sidebar-in"); 
        sidebar.classList.add("sidebar-out"); // Magic happens here
    }

    // Modal Image Gallery
    function onClick(element) {
        document.getElementById("img01").src = element.src;
        var gallery = document.getElementById("modal01"); 
        gallery.style.display = "block";
        gallery.classList.add("gallery-in"); // Magic happens here
    
        var captionText = document.getElementById("caption");
        captionText.innerHTML = element.alt;
    }

可以看看css动画here

我强烈建议使用像 jQuery 这样的库它让您的生活更轻松。

创建一个 jsfiddle所以很容易解决您的问题。