vue动画实现折叠

vue动画实现折叠

在Vue中实现折叠动画，可以使用内置的<transition>组件结合CSS过渡或JavaScript钩子。以下是两种常见方法：

使用CSS过渡

通过Vue的<transition>组件和CSS的max-height属性实现平滑的折叠效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="slide">
      <div v-show="isOpen" class="content">
        Content to be folded
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.3s ease;
  overflow: hidden;
}

.slide-enter, .slide-leave-to {
  max-height: 0;
}

.slide-enter-to, .slide-leave {
  max-height: 1000px; /* Adjust based on content height */
}

.content {
  background: #f0f0f0;
}
</style>

使用JavaScript钩子

通过<transition>的JavaScript钩子动态计算高度，适合内容高度不确定的情况。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <div v-show="isOpen" class="content" ref="content">
        Content with dynamic height
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    },
    enter(el, done) {
      el.style.height = 'auto'
      const height = el.scrollHeight
      el.style.height = '0'
      setTimeout(() => {
        el.style.height = `${height}px`
        el.addEventListener('transitionend', done)
      }, 0)
    },
    leave(el, done) {
      el.style.height = `${el.scrollHeight}px`
      setTimeout(() => {
        el.style.height = '0'
        el.addEventListener('transitionend', done)
      }, 0)
    }
  }
}
</script>

<style>
.content {
  transition: height 0.3s ease;
  overflow: hidden;
  background: #f0f0f0;
}
</style>

使用第三方库（如VueUse）

借助@vueuse/core的useTransition实现更复杂的动画效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div class="content" :style="{ height: `${height}px` }">
      Content with VueUse transition
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'

export default {
  setup() {
    const isOpen = ref(false)
    const contentHeight = ref(0)
    const height = useTransition(contentHeight, {
      duration: 300,
      transition: [0.75, 0, 0.25, 1]
    })

    const toggle = () => {
      isOpen.value = !isOpen.value
      contentHeight.value = isOpen.value ? 200 : 0 // Adjust height as needed
    }

    return { isOpen, toggle, height }
  }
}
</script>

<style>
.content {
  overflow: hidden;
  background: #f0f0f0;
}
</style>

以上方法均可实现折叠动画，选择取决于项目需求。CSS过渡适合简单场景，JavaScript钩子提供更精细控制，而第三方库能简化复杂动画的实现。