**完整案例在下方**
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动画代码片段的地方
