javascript - CSS 滑动过渡

Question

我正在尝试使用 CSS 过渡和一些 Javascript 实现滑动效果。问题是第二个框立即消失而不是滑动。有没有一种方法可以实现平滑效果，使辅助框不会消失，而是也会滑动。

如果可能的话，我还想禁用 PageLoad 上的动画。

var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var nxtbtn = document.querySelector('button[name="nxtbtn"]');
var prvbtn = document.querySelector('button[name="prvbtn"]');


function buttonDisabler() {
  if (page1.style.display == 'none') {

    nxtbtn.style.display = 'none';
    prvbtn.style.display = 'block';
  }
  if (page2.style.display == 'none') {

    prvbtn.style.display = 'none';
    nxtbtn.style.display = 'block';
  }
}
page2.style.display = 'none'
buttonDisabler();
nxtbtn.addEventListener('click', function() {
  page1.style.display = (page1.style.display == 'none') ? 'block' : 'none';
  page2.style.display = (page2.style.display == 'block') ? 'none' : 'block';
  buttonDisabler();
}, false);

prvbtn.addEventListener('click', function() {
  page1.style.display = (page1.style.display == 'block') ? 'none' : 'block';
  page2.style.display = (page2.style.display == 'none') ? 'block' : 'none';
  buttonDisabler();
}, false);

.content {
  clear: both;
  overflow: hidden;
  height: 250px;
  width: 250px;
}
.navigation {
  position: absolute
}
.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}
@keyframes slideLeft {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
/*
==============================================
slideRight
==============================================
*/

.slideRight {
  animation-name: slideRight;
  -webkit-animation-name: slideRight;
  animation-duration: 500ms;
  -webkit-animation-duration: 500ms;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}
@keyframes slideRight {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
/*

<div class="content">
  <div id="page1" class="slideLeft">
    <img src="http://placehold.it/250/323412/fff" />
  </div>
  <div id="page2" class="slideRight">
    <img src="http://placehold.it/250/321343/fff" />
  </div>
</div>
<div class="navigation">
  <button name="prvbtn">
    <</button>
      <button name="nxtbtn">></button>
</div>

Answer 1

这是因为您正在使用 display: none; 来隐藏隐藏的幻灯片。您需要在包装容器上使用 overflow: hidden;，然后让幻灯片滑入和滑出 View 。