如何在切换Vue标签页时阻止transition-group触发过渡效果？

问题描述 #

带有列表和<transition-group>的子组件在切换标签导航时，会意外触发过渡效果，影响页面体验。需要实现：切换标签时暂时禁用过渡，切换完成后立即恢复过渡功能，同时避免出现列表重复等异常。

示例代码 #

JavaScript #

const { createApp, reactive, ref } = Vue;
const app = createApp({
  setup() {      
    // switch tabs to see the side effects
    const currentTabIdx = ref(0);

    const listItems = ref([
      [
        { name: 'John', id: 1 },
        { name: 'Joao', id: 2 },
        { name: 'Jean', id: 3 },
        { name: 'Gerard', id: 4 },
      ],
      [
        { name: 'Max', id: 1 },
        { name: 'Moritz', id: 2 },
        { name: 'Foo', id: 3 },
        { name: 'Mo', id: 4 },
      ],
    ])
     
     function shuffleList() {
      listItems.value[currentTabIdx.value] = listItems.value[currentTabIdx.value].sort(() => Math.random() - 0.5);
    }
    
    return {
      currentTabIdx,
      listItems,
      shuffleList
    }
  }
});

app.component('list-component', {
  props: ['items'],

  template: `
    <ol>
      <transition-group>
        <li
          v-for="(effect, index) in items"
          :key="effect"
        >
          <div class="header">
            <h5>{{ effect.name }}</h5>
          </div>
        </li>
      </transition-group>
    </ol>
  `,
});

app.mount("#app");

CSS #

li {
  transition: 0.5s;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s;
}

.v-leave-active {
  position: absolute;
}

.v-enter,
.v-leave-to {
  opacity: 0;
}

HTML #

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <button @click="currentTabIdx=0">Tab 1</button> <!-- SWITCH TABS TO SEE SIDE EFFECTS -->
  <button @click="currentTabIdx=1">Tab 2</button> <!-- SWITCH TABS TO SEE SIDE EFFECTS -->
  | <button @click="shuffleList">Shuffle</button>

  <list-component :items="listItems[currentTabIdx]"></list-component>
</div>

已尝试方案 #

曾使用全局样式* { transition: none !important; }禁用过渡，但出现列表短暂重复的异常，无法满足需求。

解决方案 #

通过动态控制<transition-group>的disabled属性，配合Vue的nextTick确保DOM更新时机，可实现标签切换时临时禁用过渡，切换完成后立即恢复：

1. 父组件新增过渡控制逻辑 #

在父组件的setup中添加过渡禁用状态，以及标签切换的方法：

const { createApp, reactive, ref, nextTick } = Vue;
const app = createApp({
  setup() {      
    const currentTabIdx = ref(0);
    const isTransitionDisabled = ref(false); // 标记是否禁用过渡

    const listItems = ref([
      [
        { name: 'John', id: 1 },
        { name: 'Joao', id: 2 },
        { name: 'Jean', id: 3 },
        { name: 'Gerard', id: 4 },
      ],
      [
        { name: 'Max', id: 1 },
        { name: 'Moritz', id: 2 },
        { name: 'Foo', id: 3 },
        { name: 'Mo', id: 4 },
      ],
    ])
     
    function shuffleList() {
      listItems.value[currentTabIdx.value] = listItems.value[currentTabIdx.value].sort(() => Math.random() - 0.5);
    }

    // 标签切换方法：先禁用过渡，更新DOM后恢复
    function switchTab(idx) {
      isTransitionDisabled.value = true;
      currentTabIdx.value = idx;
      nextTick(() => {
        isTransitionDisabled.value = false;
      });
    }
    
    return {
      currentTabIdx,
      listItems,
      shuffleList,
      switchTab,
      isTransitionDisabled
    }
  }
});

2. 修改父组件模板的标签按钮 #

将直接修改currentTabIdx的按钮改为调用switchTab方法，并传递过渡控制状态给子组件：

<div id="app">
  <button @click="switchTab(0)">Tab 1</button>
  <button @click="switchTab(1)">Tab 2</button>
  | <button @click="shuffleList">Shuffle</button>

  <list-component :items="listItems[currentTabIdx]" :is-transition-disabled="isTransitionDisabled" :current-tab-idx="currentTabIdx"></list-component>
</div>

3. 子组件绑定过渡禁用属性 #

修改子组件，接收is-transition-disabled属性并绑定到<transition-group>的disabled上，同时优化key值避免节点识别异常：

app.component('list-component', {
  props: ['items', 'isTransitionDisabled', 'currentTabIdx'],

  template: `
    <ol>
      <transition-group :disabled="isTransitionDisabled">
        <li
          v-for="(effect, index) in items"
          :key="\`tab-\${currentTabIdx}-\${effect.id}\`" <!-- 用标签索引+唯一ID确保key全局唯一 -->
        >
          <div class="header">
            <h5>{{ effect.name }}</h5>
          </div>
        </li>
      </transition-group>
    </ol>
  `,
});

注意：原代码中用对象作为key，不同标签下ID相同的对象会被Vue视为同一节点，导致过渡异常。改用tab-标签索引-对象ID的组合key，可确保每个列表项的key全局唯一，避免不必要的DOM复用。

4. 保留原有CSS样式 #

CSS部分无需修改，保持原过渡样式即可。

这样处理后，切换标签时<transition-group>会临时禁用过渡，DOM更新完成后自动恢复，既解决了切换标签时的过渡副作用，又能保留洗牌时的过渡效果。

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