javascript - 如何为用 JS 创建的幻灯片制作动画？

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 切换容器上的显示类。

这应该使容器能够滑入和淡入，同时另一个滑出和淡出(回到其原始隐藏状态)。

你想让容器默认不可见，并使用 CSS 而不是 JS 来设置样式，这样你就可以在页面加载期间避免 FOUC(无样式内容的 Flash)(否则我们将受制于 JS 的快速加载) ，而 CSS 直接在那里)。这有助于您的应用程序在显示内容时保持优雅和正确。

保持样式和功能分离(CSS 与 JS)意味着您不会在 CSS 告诉浏览器做什么和 JS 是什么之间争论不休。此外，从长远来看，维护起来会更简单(我曾经在 JS 中构建了一个非常复杂的界面，存在这些问题)。