vue v html bug,vue使用animate.css做Vue.transition时发生bug

问题

在改进官方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>