如何在沒有 jQuery 的情況下制作幻燈片（上/下）？

Question

我正在嘗試為我的折疊組件（如引導程序）制作一個滑動（上/下）系統，但我無法獲得要動畫的元素的高度（沒有高度，我認為無法為元素設置動畫-如果這是錯誤的，那么我如何為元素設置動畫？）！

注意： [我想使用純 javascript]

 document.getElementById('btn').addEventListener('click', function(){ this.nextElementSibling.classList.toggle('active'); })

 body{ font-family: Segoe UI; font-size: 1rem; line-height: 1.5; } .collapse{ border: 1px solid #e7e7e7; border-radius: .25rem; overflow: hidden; } #btn{ padding: .75rem 1.25rem; width: 100%; border: none; font-size: inherit; background-color: #fff; cursor: pointer; } #btn:focus{ outline: 0; } .collapse-content{ font-size: 95%; padding: .75rem .75rem; display: none; } .collapse-content.active{ display: block; }

 <div class="collapse"> <button id="btn"> Click Me </button> <div class="collapse-content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit? </div> </div>

Answer 1

可以通過對標記進行一些小的更改來實現將考慮任何內部高度（具有一致的過渡速度）的基本原版 JavaScript 實現。

<div class="collapse">
  <button id="btn"> Click Me </button>
  <div class="collapse-wrapper">
      <div class="collapse-content">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
  </div>
  </div>
</div>

請注意添加了collapse-wrapper div。 這將允許您渲染內容並測量其高度，而無需實際顯示內容。 那么這只是在點擊時顯示/隱藏內容的一個簡單案例：

* {
  box-sizing: border-box;
}

.collapse-wrapper {
  overflow: hidden;
  transition: all 300ms ease-in;
}

const wrapper = document.querySelector('.collapse-wrapper')
const content = document.querySelector('.collapse-content')
const button = document.getElementById('btn')
let open = true

// Set initial height to content height, if shown by default
if (open) {
  wrapper.style.height = `${content.getBoundingClientRect().height}px`
}


function toggleOpen () {
  if (open) {
      wrapper.style.height = '0px'
      open = false
  } else {
    const height = content.getBoundingClientRect().height
    wrapper.style.height = `${height}px`;
    open = true
  }
}

button.addEventListener('click', toggleOpen)

這是一把小提琴

Answer 2

您需要使用max-height 。 是的，這很糟糕，因為這意味着您需要設置一些任意的最大高度，如果內容增長，稍后可能需要調整該高度。 但是，在這種情況下您不能為高度設置動畫，因為在內容打開之前未定義高度。

就像是：

.collapse-content{
  font-size: 95%;
  padding: .75rem .75rem;
  max-height: 0;
  transition: max-height .3s;
}
.collapse-content.active{
  max-height: 200px; //something bigger than what you need
}

Answer 3

 function slide(){ document.getElementById("sliding").style.maxHeight = "1000px"; }

 #sliding{ transition: 0.5s; max-height: 0px; overflow: hidden; }

 <button onclick ="slide();">Slide it</button> <div id = "sliding"> <h1>It works</h1> <p>Hello there</p> </div>

這有點棘手，因為您必須將 maxHeight 設置為您認為您的內容將獲得的最大高度。

來源： 我如何過渡高度：0； 到高度：自動； 使用CSS？