我正在實現(xiàn)一個具有一些隱藏內容的組件，通過單擊按鈕即可顯示。我想對max-height顯示的內容進行轉換，如下所示：<button id="show-hide">Toggle content</button><div id="revealable-content" class="content is-collapsed">Content to be revealed <a href="https://www.example.com">with a link</a></div>.content { overflow: hidden; height: auto; max-height: 200px; width: 200px; background-color: darkgray; transition: max-height 1000ms;}.content.is-collapsed { max-height: 0}const button = document.getElementById('show-hide')const content = document.getElementById('revealable-content')let hidden = truebutton.addEventListener('click', () => { hidden = !hidden if (hidden) { content.classList.add('is-collapsed') } else { content.classList.remove('is-collapsed') }})到目前為止，一切都很好。現(xiàn)在我想讓它更容易訪問，所以我hidden向內容 div 添加一個屬性，并在我知道動畫已執(zhí)行后將其設置為 true 或 false setTimeout：// at the bottom of the event handler...setTimeout(() => { content.hidden = hidden}, 1000)這破壞了“展開”動畫，但奇怪的是卻沒有破壞“折疊”動畫。折疊時，過渡動畫按預期運行 1 秒。但是，在展開時，max-height會立即應用，無需過渡。請參閱此 codepen的演示。這是怎么回事？我該如何解決？
4 回答
繁星點點滴滴
TA貢獻1803條經(jīng)驗 獲得超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>
夢里花落0921
TA貢獻1772條經(jīng)驗 獲得超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條經(jīng)驗 獲得超16個贊
看起來帶有屬性的元素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>
慕田峪7331174
TA貢獻1828條經(jīng)驗 獲得超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 不延遲地在下一個任務中執(zhí)行代碼 - 當元素沒有隱藏時，因此可以獲得高度。
為什么你需要隱藏屬性？如果您想對屏幕閱讀器隱藏內容，請使用 aria-hidden="true"，如果您希望內容無法通過選項卡聚焦，請使用 tabindex="-1"
- 4 回答
- 0 關注
- 222 瀏覽
添加回答
舉報
0/150
提交
取消