前端动画插件

1. Animate.css官网 ；

2. Animate.css（GitHub）；

3. scrollrevealjs（来回滚动可以重复执行动画）；

4. wowjs(滚动时只执行一次，依赖于animate.css)；

5. Nuxtjs上使用wow.js+animate.css实现滚动加载动画（nuxt2）；

6. Nuxtjs上使用wow.js+animate.css实现滚动加载动画（nuxt2）；

7. WOW.js（GitHub）；

8. nuxt中引入wowjs（nuxt2）；

9. nuxt3中使用wowjs:

（1）将node_modules中的wow.js文件内容拷贝一份，在项目根目录下的public中创建wow.js文件，复制拷贝的内容到此文件中；

（2）在nuxt.config.ts中配置meta选项，添加添加一个script引入之前创建好的wow.js，具体配置如下：(视具体情况使用以下两个js文件)

meta: {
    // script: [ { src: "/wow.js", type: 'text/javascript', charset: 'utf-8' }](), // 页面滚动只能执行一次
    // script: [ { src: "/wow.min2.js", type: 'text/javascript', charset: 'utf-8' }], // 升级版，页面滚动可以重复执行
  },

（3）在vue文件中直接new WOW() 就可以啦，代码如下：

<script lang="ts" setup>
onMounted(() => {
  //
  new WOW({animateClass: 'animate__animated'}).init()
});
</script>

升级版的wow.min2.js

 

 

 

 

 

 

 

标签：动画,插件,滚动,wow,js,animate,前端,css
来源： https://www.cnblogs.com/cooperGao/p/16518374.html