英文:
vue.js | Transition on dynamic components
问题
Here is the translated content:
尝试在Vue.js v2.6.11中执行动态组件转换。我已参考文档 - 组件之间的过渡，但无法获得结果。
我已经在CodeSandbox中创建了一个示例，进行了不同的尝试和错误。但以下是应该足够实现过渡的基本代码段。
模板
<template>
<div id="app">
<button @click="toggle = !toggle">切换</button>
<transition class="component-fade" mode="out-in">
<component :is="currentComp" val="msg" :key="currentComp" />
</transition>
<transition class="component-fade" mode="out-in">
<div v-if="toggle">测试</div>
<p v-else>抱歉，未找到任何项目。</p>
</transition>
</div>
</template>
脚本
<script>
export default {
name: "App",
data() {
return {
toggle: true
};
},
components: {
home2: {
template: `<h1>主页2</h1>`,
},
"about-us2": {
template: `<h1>关于2</h1>`,
},
},
computed: {
currentComp() {
return this.toggle ? "home2" : "about-us2";
},
},
};
</script>
样式
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
transition: all 6s ease;
}
.component-fade-enter,
.component-fade-leave-to {
opacity: 0;
}
</style>
代码解释：
点击切换按钮后，组件将使用计算值切换，并且组件将使用<component>的:is属性进行更改。因此，当它更改时，我正在尝试进行基本的过渡（目前是透明度更改）。
如果我的代码有遗漏，请告诉我。
英文:
Trying to perform transition on dynamic components in vue.js v2.6.11. I have referred to the documentation - Transitioning Between Components, but unable to get the results.
I have created a sample in codesandbox with different trial and errors. But below is the basic code snippet that should have been enough to achieve the transition.
template
<template>
<div id="app">
<button @click="toggle = !toggle">Toggle</button>
<transition class="component-fade" mode="out-in">
<component :is="currentComp" val="msg" :key="currentComp" />
</transition>
<transition class="component-fade" mode="out-in">
<div v-if="toggle">test</div>
<p v-else>Sorry, no items found.</p>
</transition>
</div>
</template>
script
<script>
export default {
name: "App",
data() {
return {
toggle: true
};
},
components: {
home2: {
template: `<h1>home2</h1>`,
},
"about-us2": {
template: `<h1>about2</h1>`,
},
},
computed: {
currentComp() {
return this.toggle ? "home2" : "about-us2";
},
},
};
</script>
Style
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
transition: all 6s ease;
}
.component-fade-enter,
.component-fade-leave-to {
opacity: 0;
}
</style>
Explanation of code:
On click of toggle button, the components will switch using the computed value and the component will change using the :is of <component>. So, when it changes then am trying to a basic transition (opacity change for now).
Let me know if I am missing anything in my code.
答案1
得分: 0
你没有提供“过渡名称”。
将 class="component-fade" 替换为：
<transition name="component-fade" mode="out-in">
这里是修复后的沙盒链接。
英文:
You haven't provided the transition name.
Replace class="component-fade"
<transition class="component-fade" mode="out-in">
with
<transition name="component-fade" mode="out-in">
Here is the fixed sandbox
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论