gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 14:57:44 24 4
gpt4 key购买 nike

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

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

最佳答案

这很简单,你会这样做:

  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所以很容易解决您的问题。

关于javascript - 以模式缓慢显示/隐藏侧边栏菜单和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46993239/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com