Vue飘窗动画

时间:2022-06-03 灵扁扁人气:4

前言

飘窗，即一个类似小窗子的在网页上移动的矩形元素，通常被用于一些通知类的应用场景，飘窗与横幅相比，更显眼更具有强调感和动画感，在视觉上更有冲击性，在体验上互动性也更强。

先看下效果图

实现思路与分析

1.画一个矩形元素作为飘窗，并使用固定定位

css 绘制一个固定宽高的矩形，并使用 position:fixed,利用固定定位便于飘窗在屏幕任意位置移动。

<div
        v-if="show"
        @mouseover="mouseover"
        @mouseout="mouseout"
        class="box"
        :style="{'top':top + 'px','left':left + 'px'}">
    <span @click="close">关闭</span>
    <div>
        特别提示：这仅仅是一个测试，不要慌。
    </div>
</div>

2.编写初始化函数，设定飘窗初始化规则

设置最大的top和left值 = 根元素可视区域宽高 - 飘窗的宽高 - 边距

this.maxTop = document.documentElement.clientHeight - 150 - 20
this.maxLeft = document.documentElement.clientWidth - 200 - 20

设置移动规则：分别设置水平方向和垂直方向两个步长 stepX 和 stepY，设置两个步长是为了分别利用其相反数以实现忘相反方向移动的目的：即是当遇到水平方向的边界时，stepX = -stepX；遇到垂直方向的边界时，stepY = -stepY。

绝妙啊，这个相反数的应用，如果不用相反数该咋写？欢迎评论区分享

move () {
   if (this.top >= this.maxTop || this.top < 0) {
      this.stepY = -this.stepY
   }
   if (this.left >= this.maxLeft || this.left < 0) {
      this.stepX = -this.stepX
   }

   this.top += this.stepY
   this.left += this.stepX
},

3.鼠标悬浮在飘窗时停止移动

利用 onmouseover 事件，鼠标悬浮在飘窗时，清除定时器也就是停止了 top 和 left 的值的变更也就是停止了飘窗的移动。

mouseover () {
   clearInterval(this.timer)
},

4.鼠标离开飘窗时继续移动

利用 onmouseout 事件，当鼠标离开飘窗时，再利用定时器，继续变更 top 和 left，也就是继续移动飘窗。注意开启定时器前清除下定时器，这一步是为了保证只有一个定时器会让飘窗移动。因为 top 和 left，在飘窗停止移动式并没有改变，所以能很好地延续了移动路线。

mouseout () {
  clearInterval(this.timer)
  this.timer = setInterval(() => {
    this.move()
  }, 20)
},

5.关闭飘窗

关闭飘窗做两件事，一是令 v-if 的值为 false，即设置飘窗元素不可见（移除元素）；二是清除定时器。

close () {
  clearInterval(this.timer)
  this.show = false
},

6.监听窗口的大小

window.onresize 监听浏览器窗口的大小，窗口大小被改变时调用飘窗初始化函数 init()，重置飘窗。

onresize () {
  const that = this
  window.onresize = function () {
    that.init()
  }
},

完整 demo 示例

<template>
  <div>
    <h1>飘窗 demo</h1>
    <div
      v-if="show"
      @mouseover="mouseover"
      @mouseout="mouseout"
      class="box"
      :style="{'top':top + 'px','left':left + 'px'}">
      <span @click="close">关闭</span>
      <div>
        特别提示：这仅仅是一个测试，不要慌。
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MoveWindow',
  data () {
    return {
      show: true, // 是否展现飘窗
      stepX: 1, // 水平方向的步长
      stepY: 1, // 垂直方向的步长
      timer: null, // 定时器
      maxTop: 0, // 最大的 top 值
      maxLeft: 0, // 最大的 left 值
      top: 0,
      left: 0,
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    // dom 销毁前清除定时器
    clearInterval(this.timer)
  },
  methods: {
    // 初始化飘窗规则
    init () {
      // 设置最大的top和left值：根元素可视区域宽高 - 飘窗的宽高 - 边距
      this.maxTop = document.documentElement.clientHeight - 150 - 20
      this.maxLeft = document.documentElement.clientWidth - 200 - 20

      // 设置 top 和 left 的初始值
      this.top = 0
      this.left = 0

      // 创建定时器前清除定时器，避免类似在 onresize 中调用 init() 时，产生多个定时器
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.move()
      }, 20)

      this.onresize()
    },
    // 移动函数
    move () {
      if (this.top >= this.maxTop || this.top < 0) {
        this.stepY = -this.stepY
      }
      if (this.left >= this.maxLeft || this.left < 0) {
        this.stepX = -this.stepX
      }

      this.top += this.stepY
      this.left += this.stepX
    },
    // 鼠标悬浮在飘窗时停止移动
    mouseover () {
      clearInterval(this.timer)
    },
    // 鼠标离开飘窗时恢复移动
    mouseout () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.move()
      }, 20)
    },
    // 关闭飘窗
    close () {
      clearInterval(this.timer)
      this.show = false
    },
    // 窗口大小调整时重置飘窗规则
    onresize () {
      const that = this
      window.onresize = function () {
        that.init()
      }
    },
  }
}
</script>

<style scoped lang="scss">
.box {
  background: #9cdf65;
  width: 200px;
  height: 150px;
  border-radius: 5px;
  position: fixed;
  text-align: left;
  padding: 10px;
  color: #ffffff;
  top: 0;
  left: 0;

  > span {
    text-align: right;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #1e87f0;
    cursor: pointer;
  }

  > div {
    margin-top: 30px;
  }
}
</style>

加载全部内容