当前位置: 首页 > 工具软件 > Animate.css > 使用案例 >

Animate.css的安装与使用

鲜于光辉
2023-12-01

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
        }
    } 
}

 类似资料: