介绍
页面过渡效果为您的应用程序的用户体验提供了视觉美学。JavaScript可以检测文档对象模型加载时,并用于添加或删除应用CSS过渡的类以创建模糊效果。
在本文中,您将学习如何用JavaScript和CSS模糊您的页面。
前提条件
要完成本教程,您将需要以下内容:
- 建议对
classList对象的理解,但不需要。 有关classList对象的更多信息,请参阅我们的 如何在 JavaScript 中修改 CSS 类教程
步骤 1 — 使用CSS不透明度和过渡
首先,你需要创建CSS规则,以确定页面何时打开,以及页面何时模糊。 这种效果将取决于模糊和过渡属性。 通过在体元素上添加和删除模糊类,你可以导致模糊从0到1过渡:
1[label index.html]
2<head>
3 <style>
4 body {
5 opacity: 1;
6 transition-duration: 0.7s;
7 transition-property: opacity;
8 }
9
10 body.fade {
11 opacity: 0;
12 }
13 </style>
14</head>
您要写的模糊代码将快速将模糊类应用于体元素,并将其设置为没有不透明度(`0)。
步骤 2 – 应用 Fade-in 类
在您的页面上,打开body标签后,直接将fade类分配给body元素:
1[label index.html]
2<body>
3 <script>
4 document.body.className = 'fade';
5 </script>
6 <!-- ... -->
7</body>
或者,如果您的体元素包含现有类,则可以使用add()方法将fade类应用到classList对象上。
在index.html文件中,将.add()方法附加到classList对象中,并将fade类插入为参数:
1[label index.html]
2<body>
3 <script>
4 document.body.classList.add('fade');
5 </script>
6 <!-- ... -->
7</body>
这将为您的现有类添加消失类。
步骤 3 – 删除 Fade-in 类
若要从课堂中删除变幻过渡,您可以部署一个事件倾听器,以便在文档对象模型已加载时。
在index.html文件中,使用事件倾听器,并将您的body元素上的类名称分配为空字符串的值:
1[label index.html]
2<body>
3 <!-- ... -->
4 <script>
5 document.addEventListener("DOMContentLoaded", () => {
6 window.setTimeout(function() {
7 document.body.className = '';
8 }, 230);
9 });
10 </script>
11</body>
空字符串告诉JavaScript在页面加载后返回类名称。
或者,如果您的体元素包含现有类,请在classList对象上使用.remove()方法:
1[label index.html]
2<body>
3 <!-- ... -->
4 <script>
5 document.addEventListener("DOMContentLoaded", () => {
6 window.setTimeout(function() {
7 document.body.classList.remove('fade');
8 }, 230);
9 });
10 </script>
11</body>
使用「.remove()」方法将删除「fade」类。
现在,当您加载页面时,它最初会将一个fade类添加到body元素中。CSS过渡将开始在0.7秒内从0变成1的透明度。
结论
在本文中,您使用了JavaScript和CSS的组合来创建页面加载时的模糊效果,您使用了模糊和过渡来创建效果,然后您使用了DOM操纵来添加和删除触发过渡的类。