Question

我正在创建一个包含三个内容不同的幻灯片的单页应用程序。幻灯片是使用以下JS创建的。我该如何创建一个过渡或动画来将内容滑出页面而不是完全替换它？

所有过渡都在此JS中处理，而不是在CSS中处理。我需要代码在Vanilla JS或CSS中。

let sliderScreens = document.querySelectorAll('.slide');

// Clear all screens
function reset() {
    for(let i = 0; i < sliderScreens.length; i++){
        sliderScreens[i].style.display = 'none';
    }
}

// Init the slider
function startSlide() {
    reset();
    sliderScreens[0].style.display = 'block';
}

// Show first slide
function restart() {
    reset();
    sliderScreens[0].style.display = 'block';
}

// Show next
function slideRight(){
    reset();
    sliderScreens[1].style.display = 'block';
    setTimeout(slideFinal, 2500);
}

function slideFinal(){
    reset();
    sliderScreens[2].style.display = 'block';
}

startSlide();

图表明，包含一个正在运行的应用程序的链接比在此处发布所有代码要容易得多。 https://maughan-jake.github.io/CIT_261/Final/index.html

Answer 1

由于“重新绘制”（JS为移动的每个像素重新渲染整个屏幕，而CSS只是操纵受影响的元素），我强烈建议使用JS来“切换元素状态”，而CSS来设置样式和“动画” 。

创建放置所有容器的基类（默认情况下隐藏）即

.container{
  display: none; 
  position: absolute; 
  top: 0; 
  left: -100%; 
  width: 100%; 
  height: 100%; 
  z-index: 0;
  opacity: 0; 
}

建立一个“显示”容器的类即

.container.show{
  display: block; 
  opacity: 1; 
  left: 0; 
  transition: all 0.5s ease;
}

并使用JavaScript切换容器上的show类。

这应该使容器可以滑入和淡入，而其他容器可以滑出和淡出（返回其原始隐藏状态）。

您希望默认情况下使容器不可见，并使用CSS而不是JS进行样式设置，因此可以避免在页面加载过程中使用FOUC（未样式化内容的Flash）（否则，JS会很快加载），而CSS就直接在其中）。这可以帮助您的应用程序在显示某些内容时保持优雅和正确。

将样式和功能（CSS与JS）分开将意味着您不会在CSS告诉浏览器做什么和JS是什么之间进行斗争。另外，从长远来看，维护起来会更简单（我曾经在JS中构建了一个非常复杂的接口，但遇到了这些问题）。

如何为使用JS创建的幻灯片创建动画？

1 个答案: