我嘗試了很多次，但做不到我一定錯過了一些東西。所以我的問題是我有一個主 div，它有一個子 div，而子 div 有一個<ol>. <ol>我有一個搜索框，可以在其中搜索某些內容，還有一個功能，當我單擊它時，它會將特定結果添加到其中。最初主 div 的顯示是display:none;和height:auto;。
一旦我點擊搜索結果，主 div 的顯示就會變成block使用 JS 并添加一個li專案到<ol>. 這里的問題是主 div 的高度在添加專案時突然增加<ol>。當我想從添加的專案中洗掉專案時，也會發生同樣的事情。但我想慢慢增加和減少它。
您可以在 codepen 上查看示例代碼。鏈接是https://codepen.io/sampat-28/pen/yLjwvEE
<div class="search_results_container">
<div class="search_results">
<ol class="`added_list`" id="added_list"></ol>
</div>
</div>
這是 html 布局，下面提到了 CSS。我是css影片的新手，所以如果我犯了一些錯誤，請原諒我。
.search_results_container{
display: none;
border: 4px solid #FFF;
margin: 40px auto 25px;
box-sizing: border-box;
border-radius: 21px;
max-width: 850px;
height:auto;
width: auto;
}
.search_results{
width:100%;
}
.added_list{
width:100%;
list-style-type:none;
height:auto;
height:100%;
}
現在有一個按鈕，如果我點擊它，它會做兩件事如果串列為空，它會顯示.search_results_container阻止并向其添加串列項，這就是我面臨問題的地方。當我嘗試將影片添加到其高度以緩慢增加但沒有奏效時。當我添加串列項時，它立即增加了等于串列項高度的高度。但我希望它在添加元素和從串列中洗掉元素時平滑地增加它的高度，因為專案的順序很重要。謝謝你。
uj5u.com熱心網友回復：
劑量這項作業？
const ol = document.querySelector('ol');
const button = document.querySelector('button');
button.addEventListener('click',()=>{
const li = document.createElement('li');
const text = document.createTextNode('carrort');
li.appendChild(text);
li.setAttribute('class', 'n')
ol.appendChild(li);
})ol li {
height:30px;
margin-bottom:2px;
}
ol li.n {
animation: inc 600ms linear;
transform-origin:top;
}
@keyframes inc {
from {
opacity:0;
transform:scale(1,0) translateY(-10px);
} to {
opacity:1;
transform:scale(1,1) translateY(0px)
}
}<button>onAdd</button>
<ol>
<li>carrort</li>
<li>carrort</li>
<li>carrort</li>
<li>carrort</li>
<li>carrort</li>
<li>carrort</li>
</ol>uj5u.com熱心網友回復：
如果你想讓高度變化平滑，你應該在js中改變高度而不是顯示。
只需過渡到您的 search_results_container ，它應該可以作業。
注意：transition 在顯示幕上不起作用。
現在的問題是如何隨著容器內內容的變化而動態地改變高度。
答案：
element.children[0].clientHeight
它給出了元素的第一個子元素的高度。
這是修改后的codepen鏈接：
https://codepen.io/Starnas/pen/Rwyddex?editors=1111
css和js有一些變化。HTML 保持不變。
一條建議：在檔案頂部宣告變數并在代碼中使用它們，而不是到處使用查詢選擇器，這樣可以使代碼更清晰。如果您仍想使用查詢選擇器，請創建如下函式：
function _(element){
return document.querySelector(element);
}
//you can use it like this
_("#myDiv").style.height = "10px";
uj5u.com熱心網友回復：
我希望它在添加元素和從我需要使用的串列中洗掉元素的時候平滑地增加它的高度，因為專案的順序很重要。
如您所問，在添加/洗掉專案時平滑地更改元素的高度。可以通過 和 的組合來CSS完成JavaScript。
在您的情況下，我使用CSS 影片來更改每個專案在添加/洗掉時的高度。
.added_list > li{
animation: pop-in 1s both;
}
@keyframes pop-in {
0% {
height: 0;
}
100% {
height: 75px;
}
}
當element.remove()用于從 DOM 中洗掉專案時，它會立即隱藏元素，并且沒有任何影片是過渡作品。因此，要按照您的要求順利洗掉專案，您可以在使用該remove()方法之前執行一些影片，例如隱藏元素。因此，我使用 JavaScript 添加了一個“洗掉”類來隱藏影片，然后從 DOM 中洗掉。
CSS：
.added_list li.delete {
animation: pop-out 1s both;
}
@keyframes pop-out {
0% {
height: 75px;
opacity: 1;
}
100% {
height: 0;
opacity: 0;
}
}
JavaScript：
function removeListItem(e) {
let container = e.parentNode;
// Adding a class to giving the deleting animation
container.classList.add("delete")
setTimeout(() => {
// After a '1s' removing the item from list
container.remove()
// Hiding the container when the item <1 which is 0
if (list.children.length < 1) {
searchContainer.style.display = "none";
}
}, 1000)
}
實施此修改后，您的代碼可能如下所示：
顯示代碼片段
let num = 0;
const searchContainer = document.querySelector(".search_results_container")
const list = document.querySelector("#added_list");
document.querySelector(".add_btn").addEventListener('click', function() {
let cont_display = searchContainer.style.display;
if (cont_display == "" || cont_display == "none") {
searchContainer.style.display = "flex";
}
const newShow = document.createElement("li");
newShow.classList.add("addanim");
var attr = document.createAttribute('draggable');
attr.value = 'true';
newShow.setAttributeNode(attr);
newShow.classList.add("added_item_container");
newShow.innerHTML = `<p>Item ${num} </p><i onclick="removeListItem(this)"></i>`
num ;
list.prepend(newShow);
});
function removeListItem(e) {
let container = e.parentNode;
// Adding a class to giving the deleting animation
container.classList.add("delete")
setTimeout(() => {
// After a '1s' removing the item from list
container.remove()
// Hiding the container when the item <1 which is 0
if (list.children.length < 1) {
searchContainer.style.display = "none";
}
}, 1000)
}.search_results_container {
display: none;
border: 4px solid #FFF;
margin: 40px auto 25px;
box-sizing: border-box;
border-radius: 21px;
max-width: 500px;
width: 100%;
justify-content: center;
height: auto;
width: auto;
background-color: #333;
}
.search_results {
width: 100%;
}
.add_item_div {
display: flex;
justify-content: center;
margin-top: 24px;
}
.add_btn {
height: 42px;
border: none;
background-color: limegreen;
color: #fff;
font-size: 1.2rem;
border-radius: 4px;
cursor: pointer;
}
.added_list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
padding: 0;
}
.added_list>li {
display: flex;
color: #fff;
align-items: center;
user-select: none;
justify-content: space-evenly;
font-size: 28px;
animation: pop-in 1s both;
}
/* Animation to smoothly increase the container height while adding item */
@keyframes pop-in {
0% {
height: 0;
}
100% {
height: 75px;
}
}
.added_list li.delete {
animation: pop-out 1s both;
}
/* Animation to smoothly decrease the container height and hide the item */
@keyframes pop-out {
0% {
height: 75px;
opacity: 1;
}
100% {
height: 0;
opacity: 0;
}
}
.added_list li p {
margin: 0;
}
.fa-rectangle-xmark {
cursor: pointer;
transition: all 0.3s ease-in-out;
color: #fff;
text-rendering: auto;
font-weight: 900;
font-size: 28px;
position: relative;
float: right;
background: #f80f0f;
border-radius: 3px;
width: 28px;
height: 27px;
text-align: center;
right: 1px;
margin-right: 10px;
}<div class="search_results_container">
<div class="search_results">
<ol class="added_list" id="added_list">
</ol>
</div>
</div>
<div class="add_item_div">
<button class='add_btn'>Add an item</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/514525.html