Vue 2 过渡不起作用 [英] Vue 2 Transition not working
本文介绍了Vue 2 过渡不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不知道我的代码哪里出错了.这应该是一个简单的过渡.当我单击按钮时，消息显示正确，但根本没有发生淡入淡出过渡.
<div><transition name="淡入淡出"><message v-show="showMessage" class="tr pop-up-message"><p slot="header">这是页眉</p><span slot="body">这是身体</span></消息><div v-if="!showMessage" class="block" @click.prevent="showMessage = true"><a class="button is-primary">Primary</a><div v-else-if="showMessage" class="block" @click.prevent="showMessage = false"><a class="button is-primary">Primary</a>
<脚本>从'./Message.vue'导入消息导出默认{成分:{'消息':消息，},数据(){返回{显示消息:假}},}
解决方案
您是否也添加了这些 CSS:
.fade-enter-active, .fade-leave-active {过渡:不透明度 0.5s}.fade-enter, .fade-leave-to/* .fade-leave-active in <2.1.8 */{不透明度:0}我已尝试使用上述 CSS 复制您的代码此处.
I have no idea where my code went wrong. It should be a simple transition. When I click the button the message shows correctly, but just that the there is no fade transition happening at all.
<template>
<div>
<transition name="fade">
<message v-show="showMessage" class="tr pop-up-message">
<p slot="header">This is Header</p>
<span slot="body">This is Body</span>
</message>
</transition>
<div v-if="!showMessage" class="block" @click.prevent="showMessage = true">
<a class="button is-primary">Primary</a>
</div>
<div v-else-if="showMessage" class="block" @click.prevent="showMessage = false">
<a class="button is-primary">Primary</a>
</div>
</div>
</template>
<script>
import message from './Message.vue'
export default {
components:{
'message': message,
},
data(){
return{
showMessage: false
}
},
}
</script>
解决方案
Have you added these CSS as well:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
I have tried to reproduce your code here with above CSS which works.
这篇关于Vue 2 过渡不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
