时间戳

首页 > 解决方案 > 通过添加和删除类的 CSS 页面转换（Vanilla JavaScript）

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

问题描述

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

为此，我创建了将应用于元素（'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，只需使用香草 js。谢谢你。

标签： javascriptcss

解决方案

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

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

此外，document.querySelectorAll()返回一个（nArray类）HTML NodeList，它没有classList属性。您可以将 NodeList 转换为 anArray并遍历结果，将其添加到classList每个元素中，或者，如果您知道页面上只有您要查找的内容之一document.querySelectorAll()，则 swap for document.querySelector()— 这将返回单个元素。

推荐阅读