VUE3妙招：掌握动画之精髓，玩转元素尺寸变化！

前端

2024-01-09 12:33:21

动画过渡：解锁 Vue3 元素的动感世界

踏上动画之旅

欢迎来到 Vue3 动画世界的奇妙旅程！动画过渡是让元素在尺寸变化时平滑过渡的利器，赋予您的项目以活力和灵动性。让我们踏上这段旅程，解锁动画的无穷潜力。

启动动画之旅

就像任何旅程一样，我们需要从第一步开始。定义一个布尔变量来控制动画的开关。当变量为 true 时，动画启动；当变量为 false 时，动画停止。

自动获取尺寸：计算属性的奥秘

为了让动画与元素尺寸同步变化，我们需要获取元素的宽度和高度。Vue3 的计算属性在这里大显身手。它能够自动获取元素尺寸，并在尺寸发生变化时重新计算，确保动画始终与尺寸保持一致。

倾听尺寸变化：监听 resize 事件

元素尺寸的变化会触发 resize 事件。监听这个事件，我们可以及时让动画感知到尺寸的变化，并重新计算动画，使其与新尺寸保持一致。

实战案例：让元素动起来

现在，让我们用一个实际案例体验动画过渡的魅力。我们将创建一个简单的 Vue3 组件，该组件中的元素宽度和高度会根据鼠标移动动态调整，同时元素也会随着尺寸变化平滑过渡。

<template>
  <div id="container">
    <div id="element" ref="el">
      我是元素
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animate: false,
      elementSize: null
    }
  },
  computed: {
    elementSize() {
      const el = this.$refs.el
      return {
        width: el.offsetWidth,
        height: el.offsetHeight
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.animate = true
      setTimeout(() => {
        this.animate = false
      }, 500)
    }
  }
}
</script>