我正在尝试应用转换是否必须显示组件。 我想知道为什么这个简单的例子不起作用:http://jsfiddle.net/bf830qoq/
Vue.component('loading', {
template: '#loading-template',
});
new Vue({
el: '#app',
data: {
showLoging: false
}
});
<script type="x/template" id="loading-template">
<transition="slide-fade">
<div>Loading</div>
</transition>
</script>
<!-- app -->
<div id="app">
<loading v-if='showLoging'></loading>
<button id="show-login" @click="showLoging = !showLoging">Show</button>
</div>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
答案 0 :(得分:2)
您的语法错误,您必须使用transition的名称属性,如下所示:
<transition name="slide-fade" mode="in-out">
<div>Loading</div>
</transition>
见工作fiddle。
答案 1 :(得分:1)
您的模板中存在拼写错误,因为它现在无效
<script type="x/template" id="loading-template">
<transition="slide-fade">
<div>Loading</div>
</transition>
</script>
应该正确编写name属性
<script type="x/template" id="loading-template">
<transition name="slide-fade">
<div>Loading</div>
</transition>
</script>