背景

  • 公司正好要做首页，需要模仿别人的官网，滑轮切换要有动画效果。

效果

效果图
效果图

1、方案一-wow.js

wow.js官方 文档

  • 需要搭配anmiate.css使用, 链接
  • 缺点，只能页面加载的时候执行一次动画，无法根据scroll重复触发，需要达到这个效果比较麻烦, 推荐使用方案二。

1-1、在vue中使用方法

  • 以下都是引用的静态资源

html

1
<div class="wow fadeIn"></div>

js

1
2
3
4
5
6
7
8
9
10
11
import WOW from './util/wow/wow';
mounted() {
            this.$nextTick(() => {
                new WOW.WOW().init()
            })
        },
``` 

**css**
```css 
@import "./util/wow/animate.scss";

2、方案二aos

  • 用法跟wow.js差不多，可以根据滚动 实现重复动画效果。
  • 文档
  • 以下都是引用的静态资源
  • data-aos-mirror="true"这个属性是判断动画是否可重复。

html

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="p-aos-panel">
        <!--aos-->
        <div class="p-aos" data-aos="fade-up"  data-aos-mirror="true"
        >
            aaa
        </div>
        <div class="p-aos" data-aos="fade-right">
            bbb
        </div>
        <div class="p-aos" data-aos="fade-left">
            ccc
        </div>
    </div>

js

import AOS from '../assets/utils/aos/aos'
mounted() {
            this.$nextTick(() => {
                AOS.init()
            })
        },

css 

@import "../assets/utils/aos/aos.css";
    .p-aos-panel {
        height: 200vh;
        padding-top: 900px;

        .p-aos {
            background-color: red;
            height: 200px;
            width: 200px;
            margin-top: 20px;
            color: white;
        }
    }

中间遇到的问题

vue-cli3项目引入静态资源就会报错，而vue-cli4不会。知道的麻烦回答下。