vue-fullpage

a vue-fullpage demo

by 文刀三授

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/vue-fullpage@2.0.2/index.js"></script>
<script src="//unpkg.com/hammer-touchemulator@0.0.2/touch-emulator.js"></script>
<div id="app">
  <template>
    <div class="fullpage-container">
      <div class="fullpage-wp" v-fullpage="opts">
        <div class="page-1 page">
          <p class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage</p>
        </div>
        <div class="page-2 page">
          <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
        </div>
        <div class="page-3 page">
          <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'bounceInRight', delay: 300}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'bounceInDown', delay: 600}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'zoomInDown', delay: 900}">vue-fullpage</p>
        </div>
      </div>
    </div>
  </template>
</div>

SCSS

@import url("//unpkg.com/animate.css@3.5.2");
@import url("//unpkg.com/vue-fullpage@2.0.0/vue-fullpage.css");
.fullpage-container {
  width: 300px;
  height: 450px;
  .page {
    display: block;
    text-align: center;
    font-size: 26px;
    color: #eee;
  }
  .page-1 {
    padding-top: 100px;
    background: #1bbc9b;
  }
  .page-2 {
    padding-top: 100px;
    background: #000000;
  }
  .page-3 {
    padding-top: 50px;
    background: #aabbcc;
  }
}

Babel + JSX

TouchEmulator()
Vue.use(VueFullpage)

var Main = {
    data () {
      return {
        opts: {
          start: 0,
          dir: 'v',
          loop: false,
          duration: 300,
          beforeChange: function (prev, next) {
            console.log('before', prev, next)
          },
          afterChange: function (prev, next) {
            console.log('after', prev, next)
          }
        }
      };
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')