问题
在改进官方todomvc的例子时候想要对每一项添加动画效果,根据官网的教程结合animate.css时候,出现问题,官方教程:
<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>
Vue.transition('bounce', {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
我按照上面方法改写
<li class="todo animated" v-for="todo in filteredTodos" transition="bounce">
Vue.transition('bounce', {
type: 'animation',
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
出现问题点击completed时,会出现没有完成的项目,且该list没有动画效果
尝试
我去掉transition="bounce",这个demo正常
我用编写css的方法去写动画,动画效果完美实现,无bug
如果原来没有list的话代码无任何问题,在原来有list存在的情况下,刷新页面才会出现问题
demo地址
https://github.com/zhanfang/vue-todomvc
在index.html中把注释的代码打开,并把index.css中的bounce相关代码注释掉就可以看到效果
好吧,我要打自己一巴掌,其实这个问题很简单,必须把Vue.transition放到app.js之前,否则在初始化渲染的时候,原来的list并不会绑定上transition动画
<script src="lib/vue.js" charset="utf-8"></script>
<script src="lib/vue-animated-list.js" charset="utf-8"></script>
<script src="js/store.js" charset="utf-8"></script>
<script>
Vue.transition('bounce', {
type: 'animation',
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
});
Vue.transition('updown',{
type: 'animation',
enterClass: 'bounce',
leaveClass: 'bounce'
});
Vue.transition('updown',{
type: 'animation',
enterClass: 'bounceInDown',
leaveClass: 'bounceOutUp'
});
</script>
<script src="js/app.js" charset="utf-8"></script>