Animate.css的安装与使用

npm安装Animate.css

npm install animate.css --save

在main.js中引入

import 'animate.css';

在项目中使用: 使用格式为"animate__animated  animate__xxxxxxxx"，必须要写animate__animated，否则不展示动画。

<div>
    <a-image
        :width="150"
        class="animate__animated animate__fadeInLeft"
        :src="src"
        :preview="false"
    />
</div>

需求：在长页面中，滚动条滚动到相应位置时呈现出相应动画效果。

思路：设置一个变量值为false，用v-show判断这个变量的值来控制需要动画效果的模块是否显示，动画开始前该模块不显示，动画开始时模块才会显示

<!-- productOne值为false，动画开始前不展示该模块 -->
<div v-show="productOne" class="productOne" >     
    <a-image
        :width="100"
        :src="src"
        :preview="false"
    />
    <h1 class="productTitle">标题一</h1>
</div>

        js监听滚动条。当滚动条滚动到大于该位置时，触发该动画。为防止滚动到大于该位置后动画重复展示，所以还要设置一个变量值为true，当滚动到大于该位置时，判断该变量的值为true时开始动画，然后设置该变量值为false，再向下滚动时，由于该变量的值为false，所以不能展示动画，避免了重复展示。当向上滚动到小于该位置时，设置该变量值为true，当第二次滚动到该位置下时，仍然能展示动画，同时，要设置该需要动画效果的模块不显示。

const animateCSS = (element, animation, time ,prefix = 'animate__') =>
    new Promise((resolve, reject) => {
        const animationName = `${prefix}${animation}`;
        const node = document.querySelector(element);
        node.style.setProperty('--animate-duration', time);
        node.classList.add(`${prefix}animated`, animationName);
        function handleAnimationEnd(event) {
            event.stopPropagation();
            node.classList.remove(`${prefix}animated`, animationName);
            resolve('Animation ended');
        }
        node.addEventListener('animationend', handleAnimationEnd, {once: true});
    });
window.addEventListener("scroll", ()=> {
    let currentScroll = 0
    currentScroll = window.pageYOffset
    // 这个高度你看着调
    if(currentScroll<345)
        //当页面小于345时，设置需要动画的模块不展示
        state.productOne=false
        //页面小于345时，设置值为true，下一次滚动到大于345时，仍然能触发动画效果
        state.productOnce =true
    }
    if (currentScroll>345){      
        //state.productOnce值为true，动画效果开始以后值为false，再向下滚动时，值虽然大于345，但是不触发动画，避免重复展示动画。
        if(state.productOnce){       
           // 第一个参数用于选取想要添加特效的dom,第二个参数是特效类名,第三个为特效持续时间
           animateCSS('.productOne','slideInUp','0.3s')
           state.productOne=true
           state.productOnce =false
        }
    } 
}