fullpage.js 滑入滑出滚屏动画, 纯css方式。利用css权重,无需js操作dom

**完整案例在下方**

1.分析

如下图所示, 一共8屏, 当前在第2屏上,fullpage.js 会在当前可视屏的最外层div上,插入一个active的class,根据框架添加外层的active动态添加动画.

2.滑入添加动画

代码如下展示,根据这个active的class添加动画,slideInDown 为滑入当前屏的动画效果

/*上下滑动动画 by bing*/
.animatedslideInDown {animation-duration: 2s;animation-fill-mode: both;
}
@keyframes slideInDown {0% {-webkit-transform: translate3d(0, -100%, 0);-ms-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);visibility: visible;}100% {-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}//注意中间空格 目的:给active下面的slideInDown 添加动画slideInDown
//滑入时 动画
.active .slideInDown {animation-name: slideInDown;
}

3.滑出添加动画

滑出会撤掉当前插在div上的active的class, hidden为滑出当前屏的动画效果,

注意hidden 与 slideInDow 在css中的位置,非常重要

原理:

当滑到当前屏时:因为css顺序加载样式, 先加载动画classhidden ,再加载滑入时候的动画slideInDow

此时hidden 中的animation-name属性值,被 slideInDow中的animation-name属性值替换成"slideInDown". 如下图所示

当准备滑出当前屏时:当前屏最外层div中acitve被撤掉,.active 下的.slideInDown无法找到,导致当初hidden 中被替换的animation-name属性值重新被激活.会重新执行hidden的动画行为,如下图所示

如下代码所示

/*上下滑动动画 by bing*/
.animatedslideInDown {animation-duration: 2s;animation-fill-mode: both;
}//滑出的动画
.animatedslideInDown.hidden{-webkit-animation-duration: 2s;animation-duration: 2s;animation-name: fadeOutUp ;
}
@keyframes slideInDown {0% {-webkit-transform: translate3d(0, -100%, 0);-ms-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);visibility: visible;}100% {-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}//注意中间空格 目的:给active下面的slideInDown 添加动画slideInDown
//滑入时 动画
.active .slideInDown {animation-name: slideInDown;
}// 往上淡化退出 动画
@keyframes fadeOutUp {0% {opacity: 1;}100% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);-ms-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
}

4.完整案例

<!--  demo案例完整代码 by bing-->
<template><div><full-page :options="options"><div class="section section1"><h1>第一屏</h1></div><div class="section section1"><h1 class="animatedslideInDown slideInDown hidden">第二屏</h1></div><div class="section section1"><h1>第三屏</h1></div></full-page></div>
</template><script>
export default {name: "",components: {},data() {return {options: {licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",navigationPosition: "left",scrollBar: false,afterLoad: this.afterLoad,verticalCentered: false,navigation: true,},};},
};
</script>
<style scoped lang="scss">
/*上下滑动动画 by bing*/
.animatedslideInDown {animation-duration: 2s;animation-fill-mode: both;
}
//滑出的动画
.animatedslideInDown.hidden {-webkit-animation-duration: 2s;animation-duration: 2s;animation-name: fadeOutUp;
}//注意中间空格 目的:给active下面的slideInDown 添加动画slideInDown
//滑入的动画
.active .slideInDown {animation-name: slideInDown;
}/*上下滑动 进入动画 by bing*/
@keyframes slideInDown {0% {-webkit-transform: translate3d(0, -100%, 0);-ms-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);visibility: visible;}100% {-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}
// 往上淡化 退出动画
@keyframes fadeOutUp {0% {opacity: 1;}100% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);-ms-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
}
</style>

***附平时常用的动画库网站 CSS3动画代码大集合 - 这是一个能方便找到CSS动画代码片段的地方