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;，然后让幻灯片滑入和滑出视图。

Answer 2

不使用显示属性似乎解决了这个问题。 这是解决方案，如果有人感兴趣： https://jsfiddle.net/Tankucukhas/5ytd75o1/1/

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 hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function buttonDisabler() {
    if (hasClass(page2, 'slideRight') === true) {
        nxtbtn.style.display = 'none';
        prvbtn.style.display = 'block';
    }
}

prvbtn.style.display = 'none';
nxtbtn.addEventListener('click', function () {
    page1.className = "slideRight";
    page2.className = "slideRight";
    buttonDisabler();
}, false);


prvbtn.addEventListener('click', function () {
    page1.className = "slideLeft";
    page2.className = "slideLeft";
    buttonDisabler();
}, false);

#wrapper {
    width:500px;
    position: relative;
    left: 0;
    transition: left .5s ease-in-out;
}
.contentContainer {
    -webkit-transition:1s;
    overflow: hidden;
    width:250px;
}
#page1, #page2 {
    float:left;
    -webkit-transition:1s;
    position: relative;
}
.slideRight {
    transform: translateX(-100%);
}
.slideLeft {
    transform: translateyx(100%);
}

<div class="contentContainer">
    <div id="wrapper">
        <div id="page1">
            <img src="http://placehold.it/250/CFCFC4/000" />
        </div>
        <div id="page2">
            <img src="http://placehold.it/250/C23B22/fff" />
        </div>
        <div id="wrapper"></div>
        <div class="navigation">
            <button name="prvbtn">previous</button>
            <button name="nxtbtn">next</button>
        </div>