出于某种原因，在我的webpack / vue-loader应用程序的de html代码中，-enter-active和-leave-active以默认超时出现时，不可能产生转换效果 .
在处理了缺少动画的一些问题之后，我在我的webproject中复制/粘贴了下面的代码来自vue-guide . 即使是下面这个简单的例子也根本不起作用 .
有没有其他人遇到这个问题？
index.html
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
My main.js file:
new Vue({
el: '#demo',
data: {
show: true
}
})
**我已经通过添加css类fade-enter-active，.fade-leave-active **解决了上述代码
但是，我在Vue.component中创建的图像滑块中仍然无法使用相同的原理 . 代码看起来像这样 .
var dataHome = { show: true,
currentNumber: 1,
images: ['image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg']
}
const Home = {
template: `<div class="box-container">
<p><a @click="prev">Previous</a> || <a @click="next">Next</a></p>
<transition name="fade">
<div id="demo" v-if="show">
<img :src="images[Math.abs(currentNumber) % images.length]"/>
</div>
</transition>
</div>`,
data: function () {
return dataHome //dataset with images
},
methods: {
next: function () {
this.currentNumber += 1;
this.show = true;
},
prev: function () {
this.currentNumber -= 1;
this.show = true;
}
}
}