javascript - 通过添加和删除类(Vanilla JavaScript)进行 CSS 页面转换

Question

我正在尝试创建一个在加载时在页面中快速淡出的过渡，然后在单击链接时，页面淡出并稍微向上移动。

为此，我创建了“is-loaded”类，我将把它应用于元素(“wrapper”和“page-fade”)。加载文档时，将添加“is-loaded”类，然后单击链接时，将从两个元素中删除相同的类。

代码:

.wrapper {
transform: translateY(-25px);
transition: transform cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; 
}

.wrapper.is-loaded {
transform: translateY(0); 
}

.page-loader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
z-index: 999999;
transition: opacity cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, visibility cubic-bezier(0.25, 0.46, 0.45, 0.95) 0.4s; 
}

.page-loader.is-loaded {
opacity: 0;
visibility: hidden; 
}

document.querySelectorAll('a').forEach(e => {
  e.addEventListener('click', function() {

    event.preventDefault()

    var i = this.getAttribute('href')
    var wrapper = document.querySelector('wrapper');
    var pageloader = document.querySelector('page-loader');

        wrapper.classList.remove('is-loaded'),
      setTimeout(function() {
        pageloader.classList.remove('is-loaded');
      }, 80),
      setTimeout(function() {
        window.location = i
      }, 100)
  })
})

document.addEventListener("DOMContentLoaded", function() {
  var wrapper = document.querySelectorAll('wrapper');
  var pageloader = document.querySelectorAll('page-loader');

  wrapper.classList.add('is-loaded'),
  pageloader.classList.add('is-loaded');
})

我是 JavaScript 的新手，所以我不确定为什么我的代码什么都不做。有没有办法让它工作？请不要使用 jQuery，只使用 vanilla js。谢谢。

Answer 1

您缺少前缀 selector notation . 需要用 document.querySelector()| 找到 'wrapper' 或 'page-loader' >document.querySelectorAll()。在这两种情况下，您都将使用与在 CSS 中相同的选择器语法。

var wrapper = document.querySelectorAll('.wrapper'); 
var pageloader = document.querySelectorAll('.page-loader');

此外，document.querySelectorAll() 返回一个(n Array-like)HTML NodeList ，它没有 classList 属性。 You could convert the NodeList to an Array并遍历结果，添加到每个元素的 classList 中或，如果您知道只有一个要查找的内容页面，将 document.querySelectorAll() 替换为 document.querySelector() — 这将返回单个元素。