vue加载中动画效果

### 如何在 Vue.js 中创建加载中动画效果 为了实现在 Vue 应用程序中的加载中动画效果，可以利用 `<transition>` 组件配合 `v-if` 或者 `v-show` 来控制显示状态，并结合 CSS 动画或外部库如 animate.css 实现视觉上的过渡。 #### 使用内置CSS类名的方式 当仅需简单的淡入淡出效果时，可以直接使用 Vue 的过渡类： ```html <div id="app"> <!-- 加载指示器 --> <div v-if="loading" class="loader">Loading...</div> <!-- 正常内容区域 --> <transition name="fade"> <div v-if="!loading" key="content"> Content Loaded! </div> </transition> </div> ``` ```css /* 定义进入和离开的样式 */ .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } .loader{ text-align:center; padding-top:20px; } ``` 此方法适用于想要快速实现基础版本的情况。对于更复杂的场景，则建议引入专门设计好的动画库来增强用户体验[^2]。 #### 结合 Animate.css 创建更加生动的效果 如果希望拥有更多样化的动画选项，比如旋转、缩放等复杂动作，那么借助于 animate.css 将是一个不错的选择。首先安装并导入该库到项目里；其次，在模板部分指定相应的名称给 `<transition>` 标签以便匹配对应的动画规则。 ```bash npm install animate.css --save ``` ```javascript import 'animate.css'; ``` ```html <template> <div id="app"> <!-- 显示加载图标 --> <transition appear enter-class="animated fadeIn" leave-class="animated fadeOut" mode="out-in"> <span v-if="isLoading" key="loading"><i class="fa fa-spinner fa-pulse"></i> Loading...</span> <!-- 数据准备完毕后切换至主要内容 --> <section v-else key="loaded-content"> Data has been loaded successfully. </section> </transition> </div> </template> ``` 上述例子展示了如何通过设置不同的入场(`enter`)与离场(`leave`)类让元素呈现出不同形式的变化过程。值得注意的是这里还启用了 `appear` 属性使得初始渲染也会触发动效。