VueJS - 转换不起作用答案

【问题标题】：VueJS - Transition not workingVueJS - 转换不起作用
【发布时间】：2017-02-06 15:39:55
【问题描述】：

无论是否必须显示组件，我都在尝试应用过渡。我想知道为什么这个简单的例子不起作用：http://jsfiddle.net/bf830qoq/

Javascript

Vue.component('loading', {
  template: '#loading-template',
});

new Vue({
  el: '#app',
  data: {
    showLoging: false
  }
});

HTML

<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>

CSS

.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;
}

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

您的语法错误，您必须使用transition 的名称属性，如下所示：

<transition name="slide-fade" mode="in-out">
    <div>Loading</div>
</transition>

查看工作fiddle。

【讨论】：

【解决方案2】：

您的模板中有错字，因为它现在无效

<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>

【讨论】：