vue同一页面动态路由切换animate.css动画不重新加载的问题

最新推荐文章于 2023-10-09 09:21:39 发布
最新推荐文章于 2023-10-09 09:21:39 发布
阅读量624 收藏 1
点赞数 1
分类专栏： vue 文章标签： css vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyupeng1006/article/details/127373241
版权

1、需要在updated生命周期里再重新创建wow示例

updated() {
          new this.$wow.WOW().init({//新建实列
                boxClass: 'wow',//class名字
                animateClass: 'animate__animated',//animateclass动画库类名,和当前animate动画库决定
                offset: 0,//到元素距离触发动画（当默认为0）
                mobile: true,//在移动设备上触发动画（默认为true）
                live: true//对异步加载的内容进行操作（默认为true）
                })
        },

2、公用的每个标签上加上动态的key值，使得虚拟dom重新加载真实dom

 

hyupeng1006
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue开发单页面应用容易遇到的问题：某些css在切换路径时不加载
weixin_58487208的博客
04-25 758
最近被css问题坑到了，element 的 table 表格中的某些样式或者伪元素在切换路径之后不重新加载了，本来想试试用刷新页面来解决，但是太影响用户体验。 不过大部分地方都还是能正常显示，该挂载的元素还是能挂载。我猜测可能是由于这个项目大部分<style>标记内没有用scoped来防止样式污染问题，但是我在自己的代码里面加了都没用，包括::v-deep也试了。因为这个毕竟是elementui的table表格，需要样式穿透来改变。 处理过程： 第一步：伪元素更换成img标签防止后续不加载
Vue切换回页面可见状态后，避免执行多次滚动定位的动画
ylnzzl的博客
10-19 441
vue里的一个页面组件涉及到音频文件的自动播放，并且在自动播放时要自动滚动聚焦定位到对应的语音文本列表项，那么当用户点击了自动播放后，点击浏览器的其它标签页页面 或者 打开了电脑的其它软件完全遮盖住了 该页面，那么过了一段时间，再重新查看浏览器的该页面时，该页面里累积的自动滚动聚焦定位动画会连续执行，一直到积攒的未执行的自动滚动聚焦定位动画全部执行完后才会停止，而页面看起来就是连续快速定位多次，会严重影响到用户体验。
vue 使用animate动画
joan_FontEnd的博客
08-09 7448
vue中使用animate动画的方法，以及animate动画名称
vue tab切换显示效果,基于Transition组件和animate.css实现动画切换效果
dupha的博客
02-20 1277
对于一个有名字的过渡效果，对它起作用的过渡 class 会以其名字而不是 v 作为前缀。比如，上方例子中被应用的 class 将会是 fade-enter-active 而不是 v-enter-active。具体可以参考vue transition组件官方组件说明。vue transition 组件 api官方说明。enter-active 元素渲染时。leave-active 元素销毁时。
Vue 路由跳转的时候遇到一些图片CSS不加载 解决方案
欢少的成长之路的博客
05-23 1785
Vue 路由跳转的时候遇到一些图片CSS不加载 解决方案 思路分析： 通常在我们写js 的代码的时候都会加入 window.onload() 再onload 函数中写代码，这样做的意义就是能够在文档加载完成之后才执行js 代码。 而在用 jquery 时， 通常用的是 $(function () {}) 这样写的作用和onload 函数差不多，都是在文档加载完成之后自动执行。 问题出现了： 这就导致了函数的执行条件是文档加载完成时才会触发函数。 而在 vue 中，为了节省资源，vue-router 在跳转页
Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页
11-20
在Vue中实现Tab标签页的路由效果，以及利用Animate.css添加转场动画，是一个常见的前端交互设计需求。本文将详细讲解这一过程，并介绍涉及到的关键技术和实现步骤。 首先，要实现Tab标签页的路由效果，我们需要借助...
基于animate.css动画库的全屏滚动，适用于vue.js(移动端、pc)项目。.zip
最新发布
10-22
5. 配合Vue Router实现过渡效果：如果项目使用了Vue Router进行路由管理，还可以结合`<transition>`组件定义页面切换时的动画效果，进一步提升用户体验。 在压缩包文件"vue-animate-fullpage-master"中，可能包含了...
vue页面切换项目实现转场动画的方法
10-16
在Vue开发中，创建一个具有良好用户体验的页面切换项目，特别是移动端应用，转场动画是必不可少的一部分。本文将详细讲解如何在Vue项目中实现页面切换的转场动画，主要涉及Vue的过渡和动画机制，以及Vue Router的...
pageAinimate, vue实现webapp页面切换动画.zip
09-17
在本文中，我们将深入探讨如何使用Vue.js框架来实现Web应用程序中的页面切换动画。Vue.js是一个流行的前端JavaScript框架，以其易学性和灵活性而受到开发者们的喜爱。"pageAinimate"项目是开源社区的一个示例，它...
vue实现动画，点击实现隐藏显示
04-11
当Vue的内置过渡系统不能满足需求时，可以结合使用像Animate.css、Velocity.js或GreenSock (GSAP) 等第三方库。这些库提供了丰富的预定义动画和更强大的动画控制。 6. **Vue Router中的过渡**： 在路由跳转时，...
Vue 路由切换时页面内容没有重新加载的解决方法
10-18
今天小编就为大家分享一篇Vue 路由切换时页面内容没有重新加载的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用CSS制作一个比较炫酷的页面切换动画
09-25
主要介绍了使用CSS制作一个比较炫酷的页面切换动画,根据鼠标点击显示切换时的动画效果,需要的朋友可以参考下
vue 切换tab如何不刷新_vue配合vuerouter和vuex实现多tab标签切换，页面缓存和页面释放。...
weixin_36382073的博客
02-02 1225
效果图https://www.zhihu.com/video/1218146946545778688创建routerimport Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { pa...
vue 2 路由跳转过渡动画失效问题
LiuaxmIn的博客
11-03 720
当我点击路由跳转的时候 会慢慢的消失(这个时候效果会渐入) 但是跳转后会瞬间显示出页面(没有做到渐出)很影响体验,我看教程的时候 html代码为我上面那样写的 但是直接。当我的html代码为这个样的时候,动画能展示出来 但是渐入渐出 只做渐入 而。
【前端】vue2 页面路由跳转后不重新加载
冯浩月
05-26 8620
前言 小编最近在新搭建的vue2.0的框架中，发现页面路由跳转后，不会重新加载，遇到这个问题，小编想到了vue的生命周期中，有几个钩子方法可以使用，通过上网查询了解，找到了可以使页面路由跳转后可以重新加载页面的钩子方法。 调用方法重新渲染页面 一、使用activated()钩子方法 <script> export default { // ... a...
Vue 路由跳转设置不刷新
Passerby_K的博客
10-09 2720
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。
vue 实现组件切换tab（菜单）页不刷新页面
热门推荐
AGCA_ZXL的博客
04-19 1万+
vue 实现组件切换tab页不刷新页面
VUE3实现页面缓存，tab切换时不刷新
jiujiuyibai的专栏
06-22 4170
如上图所示，为了实现页面缓存，防止每次页面切换时重新刷新数据，前前后后尝试了多种写法，如上图被注释的那段写法，与没注释掉的写法，在router-view上主要是第一种写法有设置key属性，第二种没有，后面经过调试发现，在router-view上设置key属性，会导致keep-alive不生效。
Vue实现TagView标签导航栏缓存，解决重新进去页面不刷新问题
weixin_42343966的博客
10-11 5985
Vue实现tag标签导航栏缓存，重新进去页面不刷新
根据 route 过渡动效，通过meta属性，如何动态切换animate.css效果
07-13
要根据路由的 meta 属性动态切换 animate.css 的效果，可以使用路由守卫结合动态类绑定的方式来实现。下面以 Vue.js 和 Vue Router 为例，演示如何实现： 1. 首先，在路由配置中定义每个路由的 meta 属性，用于指定要应用的 animate.css 的效果类。 ```javascript const routes = [ { path: '/', component: Home, meta: { animation: 'animate__fadeIn' } }, { path: '/about', component: About, meta: { animation: 'animate__slideInRight' } }, // 其他路由配置... ]; ``` 在上面的例子中，我们为根路径 `'/'` 的路由配置了 `'animate__fadeIn'` 的效果类，而对于 `'/about'` 路由则配置了 `'animate__slideInRight'` 的效果类。你可以根据需要自定义不同的效果类。 2. 在 Vue 组件中的导航守卫中根据路由的 meta 属性动态切换 animate.css 的效果类。 ```javascript // 在 Vue 组件中的路由守卫中动态切换动画效果 export default { // ... beforeRouteEnter(to, from, next) { next(vm => { // 通过 vm.$route.meta.animation 获取当前路由的 animate.css 效果类 const animation = vm.$route.meta.animation; // 获取要切换的元素，并添加动画效果类 const element = document.getElementById('yourElementId'); element.classList.add('animate__animated', animation); }); }, beforeRouteLeave(to, from, next) { // 在切换路由前，移除动画效果类 const element = document.getElementById('yourElementId'); element.classList.remove('animate__animated'); next(); }, // ... } ``` 在上述代码中，我们在 `beforeRouteEnter` 导航守卫中获取当前路由的 meta 属性，并将其应用到要切换的元素上。通过 `vm.$route` 可以访问到当前路由的信息，包括其 meta 属性。然后，我们获取要切换的元素，并使用 `classList.add` 方法添加 `'animate__animated'` 和动画效果类。 在 `beforeRouteLeave` 导航守卫中，我们在切换路由前移除动画效果类，以确保下次切换时能重新应用新的动画效果。 请确保在要切换的元素上设置了唯一的 id，以便通过 `getElementById` 获取到正确的元素。 通过以上步骤，你就可以根据路由的 meta 属性动态切换 animate.css 的效果了。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值