代码之家 › 专栏 › 技术社区 › Matt

CSS和JavaScript中的下一页幻灯片动画

css-animations css html javascript

Matt · 技术社区 · 6 年前

我正在尝试用CSS和Javascript实现一个“下一页”幻灯片动画。如果用户单击div page ,当前 页码 将替换当前容器。

这是我尝试过的,但我不知道如何改变 container 使尺寸基于当前尺寸 页码 .

(function () {
  document.querySelectorAll(".page").forEach((item, idx) => {
    if (idx !== 0) {
      item.classList.add("hidden");
      item.style.maxHeight = 0;
    } else {
    }
  });

  document.querySelectorAll(".page").forEach((item) => {
    item.addEventListener("click", (event) => {
      const currentPage = event.target.closest(".page");
      const nextPage = currentPage.nextElementSibling;
      nextPage.style.maxHeight = "1000px";
      nextPage.classList.add("show-page");
      currentPage.classList.add("hide-page");
    });
  });
})();

.container {
  font-family: inherit;
  position: fixed;
  bottom: 40px;
  right: 40px;
  background-color: #eb6383;
  width: 300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page {
  display: flex;
  flex-direction: column;
  transition: 1s;
  left: 0%;
  opacity: 1;
  position: relative;
  background-color: yellow;
}

.hidden {
  position: relative;
  overflow: hidden;
  left: 100%;
  transition: 1s;
}

.show-page {
  position: relative;
  left: 0%;
  transition: 1s;
}

.hide-page {
  opacity: 0;
  left: -100%;
  transition: 1s;
}

<div class="container">
        <div class="page">
            <div class="Header">page 1</div>
            <div class="Content">
                content page 1
            </div>
        </div>
        <div class="page">
            <div class="Header">page 2</div>
            <div class="Content">
                content page 2
            </div>
        </div>
        <div class="page">
            <div class="Header">page 3</div>
            <div class="Content">
                content page 3
            </div>
        </div>
    </div>

0 回复 | 直到 6 年前

Rainbow 6 年前

这是一个简化的版本。

(function() {

  let slides = document.querySelectorAll('.page');
  let slidesCount = slides.length
  let index = 0; // index
  slides.forEach(slide => {
    slide.onclick = (e) => {

      /* Logic */
      let nextIndex = (++index % slidesCount);
      /* End Logic */


      /* Management for the CSS */
      // By how much we want to move, In Percents.
      // A negative value because we're moving left
      let ditance = -100;
      // If nextIndex = 2, Then rawCssValue = -200
      let styleValue = nextIndex * ditance; 


      /* Applying the CSS */
      let style = `translateX(${styleValue}%)`;
      e.target.parentElement.style.transform = style;
    }
  });
})()

.container {
    font-family: inherit;
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 300px;
    background: #eb6383;
    overflow: hidden;
}

.page {
    display: flex;
    transition: 1s;
    left: 0%;
    opacity: 1;
    position: relative;
    background-color: yellow;
}

/* New */
.page {
    flex: 0 0 auto;
    height: 100%;
    width: 100%;
}

.page + .page {
    margin-left: 20px;
}

.slide {
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    background: #eb6383;
    transition: all .5s linear;
    transform: translateX(0);
}

<div class="container">
  <div class="slide">
    <div class="page">
      <div class="Header">page 1</div>
      <div class="Content">
        content page 1
      </div>
    </div>
    <div class="page">
      <div class="Header">page 2</div>
      <div class="Content">
        content page 2
      </div>
    </div>
    <div class="page">
      <div class="Header">page 3</div>
      <div class="Content">
        content page 3
      </div>
    </div>
    <div class="page">
      <div class="Header">page 4</div>
      <div class="Content">
        content page 4
      </div>
    </div>
  </div>
</div>

我建议使用按钮在滑块中导航,单击页面移动会很快出现问题,因为子对象会使用事件。