Question

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

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

代码：

.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，而请使用普通js。谢谢。

Answer 1

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

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

此外，document.querySelectorAll()返回一个（n个Array类似）HTML NodeList，它没有classList属性。 You could convert the NodeList to an Array并遍历结果，并添加到每个元素或的classList中（如果您知道所查找的内容仅一个）在页面上，将document.querySelectorAll()换成document.querySelector()，这将返回一个元素。

通过添加和删除类来转换CSS页面（Vanilla JavaScript）

1 个答案: