我正在努力防止切换标签后触发转换。
示例
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");
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;
}
<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-group的子组件触发了选项卡导航的副作用。
已尝试
我试着用* { transition: none !important; }
禁用身体上的转换,但列表重复了一秒钟。
你有一个想法,如何防止过渡组上标签开关,但启用它的权利之后?
2条答案
按热度按时间cnwbcb6i1#
如何防止标签更改时的过渡?
也许,有一个比预防更好的方法。
如果你能做到这一点,你需要用
keep-alive
Packagelist-component
,这样每次标签改变时组件不会被破坏和重新创建。因此,当重新排序列表时,转换效果仍然保持不变。这里我还使用
nextTick
来延迟对shuffleList
的调用,直到下一个DOM更新周期,以便transition-group
在呈现列表时应用转换。编辑
转换应该在选项卡之间停止,但是应该在列表中应用转换。
这里,
v-show
用于控制list-component
的可见性,当currentTabIdx
发生变化时,只切换列表组件的display
,不触发任何转换。s4chpxco2#
以下是我目前的解决方案,以防止标签更改时的过渡:
复制
1.父:在选项卡更改时设置为
!boolean
1.子:使用
:name
display: none
隐藏上一个列表现在我们可以在子对象中保持过渡,而不会对选项卡更改产生副作用。