10行代码，实现vue导航条动态变色，达到过渡效果

先看效果 

废话不多说，上代码

 

html部分

<!-- 绑定顶部导航条css样式 -->
    <div class="nav" :style="style"> 
      <div class="container">          
      </div>
    </div>

JavaScript部分

mounted() {
    window.addEventListener("scroll", this.windowScroll); //监听页面滚动
  },
  methods: {
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; // 计算出移动位置
      this.opacity = Math.abs(Math.round(scrollTop)) / 250; // 根据移动位置动态设置背景透明度
      this.style = { background: `rgba(0, 0, 0,${this.opacity})` };// 设置过度效果
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.windowScroll); //销毁滚动事件
  },