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

最新推荐文章于 2025-06-06 09:15:08 发布

hyupeng1006

最新推荐文章于 2025-06-06 09:15:08 发布

阅读量722

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： css vue.js javascript

本文链接：https://blog.csdn.net/hyupeng1006/article/details/127373241

vue 专栏收录该内容

20 篇文章

订阅专栏

这篇博客探讨了在Vue应用中如何在updated生命周期钩子内正确创建和初始化WOW.js实例，确保动画效果正常工作。同时，文章介绍了通过为每个公用标签添加动态key值来实现虚拟DOM的重新加载，从而影响真实DOM，达到预期的更新效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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