fullpage.js 动画, 滑到和移出当前屏,添加动画

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动画代码片段的地方