为什么用css封装没有过渡效果
来源：5-7 Vue中的动画封装
蜜瓜憨客
2018-06-08
<div id="app">
<fade :show="show">
<div>hello</div>
</fade>
<button @click="handleClick">change</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template:`
<transition
:duration="1000"
appear appear-active-class="animated fade"
enter-active-class="animated fade"
leave-active-class="animated fade">
<slot v-if="show"></slot>
</transition>
`,
})
let app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
})
2回答
-
于曼丽
2018-07-18
因为 animate.css 这个库里面，就没有 .fade 这个类，你可以写 .fadeIn .fadeOut 都可以，建议你看看 animate.css 官网
00 -
qq_金融超越战_03665934
2018-06-10
enter-active-class="animated fade"
leave-active-class="animated fade">
换成
enter-active-class="animated swing"
leave-active-class="animated shake">
同时引入animation.css就可以了。
00
相似问题