我正在嘗試使用本機 JS 進行 scrollUp 和 scrollDown Element.animate()。我希望元素從上到下平滑地出現。我得到的是立即打開和延遲崩潰。如果目前有更好的方法來做到這一點，我想知道，我仍然很好奇為什么這不起作用。
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('addNewScriptStep').onclick = function() {
let list = document.getElementById('collapsibleActionList');
let newHeight = '100%';
if (list.dataset.iscollapsed == 'false') {
newHeight = '0';
}
list.dataset.iscollapsed = !eval(list.dataset.iscollapsed);
list.animate({
height: newHeight
}, {
fill: 'forwards',
duration: 500
});
};
});#collapsibleActionList {
overflow: hidden;
height: 0;
transition: height 0.5s;
}<html>
<body>
<a href="javascript:void(0)" id="addNewScriptStep" class=""> Add an action </a>
<ul id="collapsibleActionList" data-iscollapsed="true">
<li data-type="open_url">Open URL</li>
<li data-type="href_to">Click link</li>
<li data-type="click_element">Click element</li>
<li data-type="insert_into">Insert into textbox</li>
<li data-type="sleep">Sleep</li>
<li data-type="checked">Check checkbox</li>
<li data-type="unchecked">Uncheck checkbox</li>
<li data-type="send_form">Submit form</li>
<li data-type="if_element_is_defined">Continue if HTML contains element</li>
<li data-type="if_element_is_not_defined">Continue if HTML doesn't contain element</li>
<li data-type="if_text_is_defined">Continue if there is text</li>
<li data-type="if_text_is_not_defined">Continue if there is no text</li>
</ul>
</body>
</html>編輯：我注意到在洗掉 CSS 轉換屬性后，串列不能再折疊，雖然影片函式是用 {height: '0'} 呼叫的
uj5u.com熱心網友回復：
用 usingmax-height代替height你可以做到。
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('addNewScriptStep').onclick = function() {
let list = document.getElementById('collapsibleActionList');
let newHeight = '999px';
if (list.dataset.iscollapsed == 'false') {
newHeight = '0';
}
list.dataset.iscollapsed = !eval(list.dataset.iscollapsed);
list.animate({
maxHeight: newHeight
}, {
fill: 'forwards',
duration: 500
});
};
});#collapsibleActionList {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s;
}<body>
<a href="javascript:void(0)" id="addNewScriptStep" class=""> Add an action </a>
<ul id="collapsibleActionList" data-iscollapsed="true">
<li data-type="open_url">Open URL</li>
<li data-type="href_to">Click link</li>
<li data-type="click_element">Click element</li>
<li data-type="insert_into">Insert into textbox</li>
<li data-type="sleep">Sleep</li>
<li data-type="checked">Check checkbox</li>
<li data-type="unchecked">Uncheck checkbox</li>
<li data-type="send_form">Submit form</li>
<li data-type="if_element_is_defined">Continue if HTML contains element</li>
<li data-type="if_element_is_not_defined">Continue if HTML doesn't contain element</li>
<li data-type="if_text_is_defined">Continue if there is text</li>
<li data-type="if_text_is_not_defined">Continue if there is no text</li>
</ul>
</body>你可以用更簡單的方式做到這一點。如果你想？
顯示代碼片段
const link = document.getElementById('addNewScriptStep')
const list = document.getElementById('collapsibleActionList')
link.addEventListener('click',()=>{
list.classList.toggle('open')
})#collapsibleActionList {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s;
}
#collapsibleActionList.open {
overflow: hidden;
max-height: 999px;
transition: max-height 0.5s;
}<body>
<a href="javascript:void(0)" id="addNewScriptStep" class=""> Add an action </a>
<ul id="collapsibleActionList" data-iscollapsed="true">
<li data-type="open_url">Open URL</li>
<li data-type="href_to">Click link</li>
<li data-type="click_element">Click element</li>
<li data-type="insert_into">Insert into textbox</li>
<li data-type="sleep">Sleep</li>
<li data-type="checked">Check checkbox</li>
<li data-type="unchecked">Uncheck checkbox</li>
<li data-type="send_form">Submit form</li>
<li data-type="if_element_is_defined">Continue if HTML contains element</li>
<li data-type="if_element_is_not_defined">Continue if HTML doesn't contain element</li>
<li data-type="if_text_is_defined">Continue if there is text</li>
<li data-type="if_text_is_not_defined">Continue if there is no text</li>
</ul>
</body>uj5u.com熱心網友回復：
height: 100%在這種情況下并沒有真正帶來任何意義：因為它不依賴于某些父元素的高度，所以它基本上height: auto與你不能使用height:auto. 現在，考慮到您已經在使用 .js，在為元素設定影片之前，您可以先設定其固有高度（以像素為單位），您希望將其設定為：
const ul = document.querySelector("ul")
const btn = document.querySelector("button")
//the important part:
ul.style.height = ul.scrollHeight "px"
btn.addEventListener("click", ()=>ul.classList.toggle("open"))ul{
display: block;
overflow: hidden;
transition: height 1s;
background: #ddd;
}
ul:not(.open){
height: 0 !important;
}<button>Click</button>
<ul>
<li>Some elements</li>
<li>To show</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/462459.html
標籤：javascript html css 动画片 前端