如何在Vue组件中覆盖过渡效果？Buefy Collapse组件过渡自定义咨询

我来帮你搞定这个问题！你遇到的核心点是Buefy Collapse默认绑定了fade这个CSS过渡名称，要让JS钩子生效，关键是替换这个过渡名称并注册对应的JS逻辑，而不是去覆盖全局的Vue Transition或者写Mixin（当然全局配置也可以，看你需求）。

下面分两种场景给你具体方案：

单个Collapse组件替换过渡 #

如果你只想修改某一个Collapse的过渡效果，可以这么做：

1. 给Collapse指定自定义的过渡名称，替换默认的fade
2. 在组件内注册这个过渡名称对应的JS钩子
3. 补充必要的基础样式（防止默认CSS干扰）

示例代码如下：

<template>
  <div>
    <button @click="isOpen = !isOpen">切换折叠</button>
    <!-- 这里把transition设为自定义名称 -->
    <b-collapse :transition="customCollapseTransition" v-model="isOpen">
      <div class="collapse-content">
        这是折叠的内容，现在用JS控制过渡啦！
      </div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      customCollapseTransition: 'custom-slide'
    }
  },
  mounted() {
    // 注册自定义过渡的JS钩子
    this.$root.$options.transitions[this.customCollapseTransition] = {
      beforeEnter(el) {
        // 进入前初始化样式：高度为0，隐藏溢出内容
        el.style.height = '0'
        el.style.overflow = 'hidden'
        el.style.transition = 'height 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
      },
      enter(el, done) {
        // 获取内容实际高度，触发过渡
        const targetHeight = el.scrollHeight + 'px'
        el.style.height = targetHeight
        // 监听过渡结束，调用done标记完成
        el.addEventListener('transitionend', done, { once: true })
      },
      leave(el, done) {
        // 离开时把高度设为0，触发过渡
        el.style.height = '0'
        el.addEventListener('transitionend', done, { once: true })
      }
    }
  }
}
</script>

<style scoped>
/* 重置默认的fade过渡样式，避免干扰 */
.custom-slide-enter-active,
.custom-slide-leave-active {
  /* 这里可以留空，因为JS已经定义了过渡属性 */
}
.custom-slide-enter,
.custom-slide-leave-to {
  height: 0;
  overflow: hidden;
}

.collapse-content {
  padding: 1rem;
  background: #f5f5f5;
}
</style>

全局替换所有Collapse组件的过渡 #

如果你的整个项目都需要替换Collapse的过渡效果，可以全局配置：

1. 在Vue初始化前注册全局过渡钩子
2. 修改Buefy的全局配置，把Collapse的默认过渡名称改成自定义的

示例代码：

// main.js
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

// 注册全局过渡钩子
Vue.transition('custom-slide', {
  beforeEnter(el) {
    el.style.height = '0'
    el.style.overflow = 'hidden'
    el.style.transition = 'height 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
  },
  enter(el, done) {
    const targetHeight = el.scrollHeight + 'px'
    el.style.height = targetHeight
    el.addEventListener('transitionend', done, { once: true })
  },
  leave(el, done) {
    el.style.height = '0'
    el.addEventListener('transitionend', done, { once: true })
  }
})

// 配置Buefy全局选项，修改Collapse的默认过渡
Vue.use(Buefy, {
  collapse: {
    transition: 'custom-slide'
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

为什么之前的方法没生效？ #

你之前尝试覆盖Vue Transition或者写Mixin没成功，是因为Buefy的Collapse组件是直接使用Vue的<transition>组件，并硬指定了默认的fade过渡名称。只要替换这个名称为你自定义的，Vue就会自动使用你注册的JS钩子，不需要去修改组件内部的逻辑~

内容的提问来源于stack exchange，提问作者QaMar ALi