【JavaScript源代码】vue手写加载动画项目.docx

vue手写加载动画项目 　　在页面没有响应时，展示加载动画是一种对用户友好的表现，不至于白屏，等响应内容渲染到页面时再移除动画　　先放loading效果图　　原理：伪类+动画，下面是步骤图，贴上助于理解，加载动画本质是设置一个定宽定高的正方形，border-radius: 50%;使其成为圆形，再给该div3px的边框并设为透明，然后在单独设置上边框为白色，用::before，::after伪类absolute定位并进行同样设置，不同之处是依次增大留出的间隙，以及动画执行时间变长和设置延迟，这样就能形成圆圈不同快慢的旋转　　完整代码：　　components文件夹下loading.vue　　< Vue.js 是一款流行的前端框架，用于构建用户界面。在本项目中，我们将探讨如何使用 Vue.js 手写一个加载动画，以提供更好的用户体验。当页面正在加载内容时，加载动画可以防止用户看到空白屏幕，从而增加应用的交互性和专业感。 加载动画的基本原理是利用 CSS 伪类和动画效果来实现。创建一个具有固定宽度和高度的正方形，并通过 `border-radius: 50%` 将其转换为圆形。接着，设置一个3像素宽的边框并将其设置为透明，然后对上边框应用白色。通过 `::before` 和 `::after` 伪类，我们可以创建两个绝对定位的元素，同样设置边框但分别调整它们之间的间隙和动画执行时间，以产生不同速度旋转的效果，从而形成一个动态的加载动画。 以下是在 Vue.js 应用中实现这个加载动画的组件代码： ```html <template> <div id="loader_wrapper"> <div id="loader"></div> <div class="load_title">正在加载，请稍等......</div> </div> </template> <script> export default { name: "loading", }; </script> <style scoped> #loader_wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; background: rgba(0, 0, 0, .8); background-size: 100% 100%; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 300px; height: 300px; /* background: red; */ margin: -150px 0 0 -150px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; -webkit-animation: spin 5s linear infinite; -ms-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; z-index: 1001; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; /* background: green; */ border: 3px solid transparent; border-top-color: #fff; -webkit-animation: spin 8s linear infinite; -ms-animation: spin 8s linear infinite; -moz-animation: spin 8s linear infinite; -o-animation: spin 8s linear infinite; animation: spin 8s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; /* background: yellow; */ border: 3px solid transparent; border-top-color: #fff; -webkit-animation: spin 8s linear 1s infinite; -ms-animation: spin 8s linear 1s infinite; -moz-animation: spin 8s linear 1s infinite; -o-animation: spin 8s linear 1s infinite; animation: spin 8s linear 1s infinite; } </style> ``` 在这个例子中，`#loader` 元素是主动画圆圈，而 `#loader:before` 和 `#loader:after` 分别表示两个内嵌的圆圈，它们有独立的动画时间和延迟。`-webkit-animation`、`-ms-animation`、`-moz-animation`、`-o-animation` 和 `animation` 属性用于在不同浏览器中实现动画效果，`spin` 是自定义的 CSS 动画名称。 要启动和停止加载动画，你可以根据需要在 Vue 组件的 `data` 或 `methods` 中控制 `#loader_wrapper` 的显示与隐藏。例如，可以在组件的 `mounted()` 生命周期钩子中显示加载动画，而在请求完成或数据加载后通过 `v-if` 或 `v-show` 指令将其关闭。 这个 Vue.js 加载动画项目展示了如何结合 CSS3 动画和 Vue.js 组件实现一个简单的但视觉效果良好的加载指示器。这种技术不仅适用于 Vue，也可以应用于其他支持 CSS 动画的前端框架，如 React 或 Angular。通过这种方式，开发者能够为用户提供更加流畅和友好的用户体验。