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