屏幕滑动动画方案

背景

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

效果

一、方案一-wow.js

wow.js官方 文档

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

---

1-一、在vue中使用方法

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

html

<div class="wow fadeIn"></div>
复制代码

js

import WOW from './util/wow/wow';
mounted() {
            this.$nextTick(() => {
                new WOW.WOW().init()
            })
        },
复制代码

css

@import "./util/wow/animate.scss";
复制代码

二、方案二aos

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

html

<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不会。知道的麻烦回答下。