屏幕滑動動畫方案

背景

• 公司正好要作首頁，須要模仿別人的官網，滑輪切換要有動畫效果。

效果

一、方案一-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不會。知道的麻煩回答下。