4 回答
TA贡献1803条经验 获得超3个赞
更新:
解决方案似乎比预期容易得多。在删除 -class 之前使用较短的超时(例如 10ms)is-collapsed将为您解决问题:
注意:我将超时设置为 100 毫秒,因为使用 Firefox 时,过渡并不总是像 Chrome 中那样平滑。
const button = document.getElementById('show-hide');
const content = document.getElementById('revealable-content');
let hidden = true;
button.addEventListener('click', () => {
hidden = !hidden;
if (hidden) {
content.classList.add('is-collapsed');
return setTimeout(() => {
content.hidden = hidden;
}, 1000);
}
content.hidden = hidden;
return setTimeout(() => {
content.classList.remove('is-collapsed');
}, 100);
})
.content {
overflow: hidden;
height: auto;
max-height: 200px;
width: 200px;
background-color: darkgray;
transition: max-height 1000ms linear;
}
.content.is-collapsed {
max-height: 0
}
<button id="show-hide">Toggle content</button>
<div hidden id="revealable-content" class="content is-collapsed">
Content to be revealed
<a href="https://www.example.com">with a link</a>
</div>
TA贡献1772条经验 获得超6个赞
height: auto;
没有动画效果,但有高度属性。但是当你的元素被隐藏时,(display: none)
你无法获得高度。因此,您需要克隆它并获取高度,然后您可以使用高度应用动画。
<!DOCTYPE html>
<html>
<head>
<title>Avinash</title>
<style>
#slider {
margin:0px auto;
padding:0px;
width:400px;
border:1px solid #000;
background:#0f0;
height:20px;
overflow:hidden;
}
</style>
<script>
var minheight = 20;
var maxheight = 300;
var time = 1000;
var timer = null;
var toggled = false;
window.onload = function() {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px';
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height);
var init = (new Date()).getTime();
var height = (toggled = !toggled) ? maxheight: minheight;
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init;
if(instance < time ) {
var pos = Math.floor(disp * instance / time);
result = instanceheight + pos;
slider.style.height = result + 'px';
document.getElementById('log').innerHTML = 'Current Height : <b>' + result + '</b><br /> Current Time : <b>' + instance + '</b>';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
controler.value = toggled ? ' Slide Up ' :' Slide Down ';
document.getElementById('log').innerHTML = 'Current Height : <b>' + height + '</b><br /> Current Time : <b>' + time + '</b>';
}
},1);
};
};
</script>
</head>
<body>
<h1> Toggle Slide </h1>
<input type="button" id="slide" value =" Slide Down "/>
<span id="log" style="position:absolute; left:10px; top:150px;"></span>
<br />
<div id="slider">
content goes here
</div>
</body>
</html>
TA贡献1801条经验 获得超15个赞
看起来带有属性的元素hidden具有这样的浏览器属性:
div[Attributes Style] {
display: none;
}
display: none;正在破坏动画。
这可能是一个解决方案,对我有用:
更新
const button = document.getElementById('show-hide')
const content = document.getElementById('revealable-content')
let hidden = true
button.addEventListener('click', () => {
hidden = !hidden
if (hidden) {
content.classList.add('is-collapsed')
} else {
content.style.display = 'block'; // set display block before class is-collapsed removes
setTimeout(() => {
content.classList.remove('is-collapsed')
content.style.display = ''; // clear css display
}, 100); //changed time interval for Firefox
}
setTimeout(() => {
content.hidden = hidden
}, 1000)
})
.content {
overflow: hidden;
height: auto;
max-height: 200px;
width: 200px;
background-color: darkgray;
transition: max-height 1000ms;
display: block;
}
.content.is-collapsed {
max-height: 0;
}
/*added to hide collapsed element*/
.content.is-collapsed[hidden] {
display: none;
}
<button id="show-hide">Toggle content</button>
<div hidden id="revealable-content" class="content is-collapsed">
Content to be revealed
<a href="https://www.example.com">with a link</a>
</div>
TA贡献1828条经验 获得超13个赞
js逻辑有问题。当内容隐藏时,按下按钮显示它,在内容仍然隐藏时应用动画,动画完成后,删除隐藏属性,立即显示内容。
只需将您的点击处理程序代码更改为:
if(hidden){
content.hidden = false
}else {
setTimeout(() => {
content.hidden = true
}, 1000)
}
hidden = !hidden
setTimeout(() => {
if (hidden) {
content.classList.add('is-collapsed')
} else {
content.classList.remove('is-collapsed')
}
})
由于 Muhammad Tahazzot 答案中所述的原因,需要第二次超时 - 在元素未隐藏之前高度未知。setTimeout 不延迟地在下一个任务中执行代码 - 当元素没有隐藏时,因此可以获得高度。
为什么你需要隐藏属性?如果您想对屏幕阅读器隐藏内容,请使用 aria-hidden="true",如果您希望内容无法通过选项卡聚焦,请使用 tabindex="-1"
- 4 回答
- 0 关注
- 132 浏览
添加回答
举报