background

  • The company just want to do the home page, need to imitate other people’s official website, pulley switch to have animation effect.

The effect

1. Plan 1 –wow.js

Wow.js official documentation

  • Need to matchanmiate.cssUse,link
  • disadvantagesThe animation can only be performed once when the page loads, and cannot be based onscrollRepeat trigger, need to achieve this effect is more troublesome, recommended to use plan 2.

1-1, invueHow to use in

  • The following are all referenced static resources

html

<div class="wow fadeIn"></div>
Copy the code

js

import WOW from './util/wow/wow';
mounted() {
            this.$nextTick((a)= > {
                new WOW.WOW().init()
            })
        },
Copy the code

css

@import "./util/wow/animate.scss";
Copy the code

2. Plan 2aos

  • Usage withwow.jsAlmost, you can repeat the animation by scrolling.
  • The document
  • The following are all referenced static resources
  • data-aos-mirror="true"This property determines whether the animation is repeatable.

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>
Copy the code

js

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

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;
        }
    }
Copy the code

Problems encountered in the middle

Vue-cli3 project introduces static resources, but vue-cli4 does not. Know the trouble to answer.