色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

兩個不同高度的絕對div之間的漸變過渡

CSS
錢斌斌1年前7瀏覽0評論

我有兩個定位為絕對的文章標簽，我想使用漸變效果在它們之間過渡。

我正在使用不透明度和z指數來實現這一點。

我遇到的問題是，當活動文章后面的文章的內容比前面的文章更高時，當頁面滾動時，它變得可見，避免這種情況的唯一方法是使用display: none或overflow: hidden，但這會使頁面不流行或不可滾動。

我得到了這個:

// When clicking on a next button change the active class
document.querySelector('#next').addEventListener('click', function() {
  document.querySelector('.active').classList.remove('active')
  document.querySelector('#about').classList.add('active')
})

html, body, main {
  height: 100%;
}

main {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
}

body {
 background: pink;
 padding: 0;
 margin: 0;
}


.content {
  display: table-cell;
  vertical-align: middle
}

.container {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

article {
  display: table;
  width: 100%;
  height: 100%;
  background: no-repeat fixed bottom / cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  background-color: #fff;
}

article.active {
  opacity: 1;
  z-index: 1;
}

<html lang="en">
<body>
<main>

  <article id='intro' class='active'>
    <div class='content'>
      <div class='container'>
        This is the front page
        
        <button id='next'>Next</button>
        <br><br><br><br><br><br><br><br><br><br>
      </div>
    </div>
  </article>

  <article id='about'>
    <div class='content'>
      <div class='container'>
         This is the page behind the front that I cannot hide cause its content makes it higher
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br>
      </div>
    </div>
  </article> 
</main>
</body>
</html>

我建議結合換兩個班。例如，“active”類設置文章的高度，visible類使文章可見:

document.querySelectorAll('.next').forEach( btn => btn.onclick = () => changeArticle('next') )
document.querySelectorAll('.prev').forEach( btn => btn.onclick = () => changeArticle('prev') )

function changeArticle(direction) {
  const activeArticle = document.querySelector('.active');
  const elementSibling = direction === 'next' ? 'nextElementSibling' : 'previousElementSibling';
  const nextArticle = activeArticle[elementSibling];
  activeArticle.classList.remove('visible');
  nextArticle.classList.add('visible');
  /* transition-duration delay */
  setTimeout(() => {
    activeArticle.classList.remove('active')
    nextArticle.classList.add('active');
  }, 400);
}

html,
body {
  height: 100%;
}

body {
  background: pink;
  padding: 0;
  margin: 0;
}

main {
  position: relative;
  height: 100%;
  overflow-y: scroll;
}

article {
  inset: 0;
  position: absolute;
  transition: opacity .4s, visibility .4s;
  min-height: 100%;
  height: max-content;
  display: grid;
  place-items: center;
}

article:not(.active) {
  height: 0;
  overflow: hidden;
}

article:not(.visible) {
  opacity: 0;
  visibility: hidden;
}

#intro {
  background-color: lightblue;
}

#about {
  background-color: lightgreen;
}

.content {
  width: min(500px, 100%);
  padding: 40px 20px;
}

<main>
  <article id="intro" class="active visible">
    <div class="content">
      <div class="container">
        This is the front page
        <button class="next">Next</button>
      </div>
    </div>
  </article>
  <article id="about">
    <div class="content">
      <div class="container">
        <button class="prev">Prev</button>
        This is the page behind the front that I cannot hide cause its content makes it higher
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br>
      </div>
    </div>
  </article> 
</main>

看起來可以用100vh的高度來解決

根據我的評論:這就是我所說的“簡化”:

document.addEventListener('click', (evt) => {
  if (evt.target.closest(`button`)) {
    const nxt = evt.target.closest(`button`).dataset.next;
    document.querySelector('.active').classList.remove('active');
    return document.querySelector(nxt).classList.add('active');
  }
})

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* for creating space in demo */
article div p {
  min-height: 1.2rem;
}

article {
  position: absolute;
  width: 100vw;
  left: 50%;
  height: 0;
  transform: translateX(-50%);
  background-color: rgb(245, 191, 200);
  transition: background-color 0.5s ease;
}

article div {
  position: absolute;
  z-index: -1;
  opacity: 0;
  max-height: 100vh;
  max-width: 75%;
  top: 50%;
  left: 50%;
  overflow: auto;
  transform: translate(-50%, -50%);
  background-color: rgb(245, 191, 200);
  transition: opacity, background-color 0.5s ease;
}

article.active {
  top: 0;
  bottom: 0;
  height: auto;
  background-color: #FFF;
}

article.active div {
  z-index: 2;
  opacity: 1;
  background-color: #FFF;
}

<main>
  <article class="active" id="intro">
    <div>
      This is the front page
      <button data-next="#about">Next</button>
    </div>
  </article>

  <article id="about">
    <div>
      This is the page behind the front that I cannot 
      hide cause its content makes it higher
      <button data-next="#intro">Previous</button>
      <p></p><p></p><p></p><p></p><p></p><p></p>
      <p></p><p></p><p></p><p></p><p></p><p></p>
       <p></p><p></p><p></p><p></p><p></p><p></p>
       <p></p><p></p><p></p><p></p><p></p><p></p>
       <p></p><p></p><p></p>
       <p>THE LAST PARAGRAPH</p>
    </div>
  </article>
</main>