使用vue3写一个自动获取宽度高度变化的过渡动画

不念不忘少年蓝@ 2024-03-26 08:41 19阅读 0赞

<p>首先，在 vue3 中使用过渡动画需要在组件中使用 <code><transition></code> 标签包裹住你想要添加过渡动画的元素。然后可以在 <code><transition></code> 标签上添加 <code>name</code> 属性来设置过渡动画的名称，这样就可以在组件的样式中通过过渡动画的名称来设置过渡动画的样式。</p>
    <p>要自动获取宽度和高度的变化并实现过渡动画，你可以使用 vue3 中的 <code>watch</code> 选项来监听组件的宽度和高度的变化，并在变化时触发过渡动画。</p>
    <p>下面是一个示例代码：</p>
    <p>```html
    <template>
      <div>
        <button @click="toggle">Toggle</button>
        <transition name="fade">
          <div v-if="show" ref="box" class="box">
            Box
          </div>
        </transition>
      </div>
    </template></p>
    <script>
    export default {
      data() {
        return {
          show: true,
        }
      },
      watch: {
        show(newVal) {
          if (newVal) {
            // 获取元素的宽度和高度
            const width = this.$refs.box.offsetWidth
            const height = this.$refs.box.offsetHeight
            // 设置过渡动画的初始状态
            this.$refs.box.style.transform = `scale(0)`
            this.$refs.box.style.width = `${width}px`
            this.$refs.box.style.height = `${height}px`
            // 延迟一段时间后触发过渡动画
            setTimeout(() => {
              this.$refs.box.style.transform = `scale(1)`
            }, 50)
          } else {
            // 获取元素的宽度和高度
            const width = this.$refs.box.offsetWidth
            const height = this.$refs.box.offsetHeight
            // 设置