浏览器滚动至元素动画入场效果

vue3.2中使用 wowjs+animate.css实现滚动轴动画

一、animate.css的基本使用 - 学习任何技术都必须要看官方文档

官网：animate.style/

安装包

npm install animate.css --save

引用1

import 'animate.css';

基础使用 - 可以重新定义动画状态，具体看文档

// animate__animated(主类)  + 示例中的动画类  
<h1 class="animate__animated animate__bounce">An animated element</h1>

二、wowjs的使用

1. 安装 - 注意版本

npm i swiper

2.引用到main.js,两个

import 'animate.css/animate.min.css'
import 'wow.js/css/libs/animate.css'

3.引用官方vue案例

  mounted() {
    let wow = new WOW({
      boxClass: "wow", // 需要执行动画的元素的 class; 【String类型】默认值：‘wow’；
      animateClass: "animated", // a需要执行动画的元素的 class; 【String类型】默认值：‘wow’；
      offset: 0, //需要执行动画的元素的 class; 【String类型】默认值：‘wow’；
      mobile: true, // 需要执行动画的元素的 class; 【String类型】默认值：‘wow’；
      live: true, // 需要执行动画的元素的 class; 【String类型】默认值：‘wow’；
      callback: function (box) {
         // 应该是初始化成功的回调
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window
    });
    wow.init()
  },
}

4.对元素进行类名绑定

<img
    src="@/assets/image/pic1/base2.png" 
    class="wow animate__fadeInLeft"
    data-wow-duration="2s" 
    data-wow-delay="2s"
    data-wow-offset="10"
    data-wow-iteration="1"
>

5.class类以及自定义标签数据说明

5.1 - class说明

• class中的wow:Lwow.js配置项中的boxClass的绑定
• class中的animate__fadeInLeft，就是一个动画类，可以是animater动画类，或者自己实现一个动画类

5.2自定义标签数据说明

1、data-wow-duration：更改动画持续时间  
2、data-wow-delay：动画开始前的延迟  
3、data-wow-iteration：动画的次数重复（无数次：infinite）  
4、data-wow-offset：开始动画的距离

6.最终的一个简易效果 - 当元素暴露的时候展示元素前且动画入场