使用transition 组件，实现滚动页面的伸缩效果

理解vue提供的transition组件的使用，let start~

先看一个小demo了解下transition组件 参考链接：v2.cn.vuejs.org/v2/guide/tr… 看完记得回来呦~

使用transition组件实现伸出缩进的动态效果

html部分

 <template>
  <div>
    缩进伸出效果
    <div id="demo">
      <transition name="fade">
        <p v-show="show">hello</p>
      </transition>
    </div>
  </div>
</template>

js部分（vue2）

export default {
  data () {
    return {
      show: true,//控制组件是否显示
      scrollOld: 0,//记录滚动的上次位置
      scrollNew: 0//记录滚动的当前位置
    }
  },
     methods: {
    //为了方便清除对window的监听，记得回调函数单独领出来写，不然地址不一样会清除失败
    monitoerScroll () {
      this.scrollNew = window.scrollY
    }
  },
    //页面开始加载就对window监听滚动
      mounted () {
    window.addEventListener('scroll', this.monitoerScroll}
//以下就是监听最新滚动位置的变化
  watch: {
    scrollNew (newVal, oldVal) {
    //开启延时器是很必要的，不然newVal会一直跟window.scrollY一样
      setTimeout(() => {
        if (newVal === window.scrollY) {
          console.log('停止滚动')
          this.scrollOld = newVal
          this.show = true
        }
      }, 100)
      if (oldVal === this.scrollOld) {
        console.log('开始滚动拉')
        this.show = false
      }
    }
  },
    //卸载页面记得清除监听事件哦~
 destroyed () {
    window.removeEventListener('scroll', this.monitoerScroll)
  }

style部分（less）

#demo{
  height: 1500px;
  background-color: antiquewhite;
}
p {
  position: fixed;
  right: 0;
  top: 200px
}
.fade-enter-active,
.fade-leave-active {
  transition: transform .5s;
}
.fade-enter,
.fade-leave-to {
  transform: translateX(100px);
}

快去试试叭~