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