javascript - vue使用animate.css做Vue.transition时发生bug

Question

问题

在改进官方todomvc的例子时候想要对每一项添加动画效果，根据官网的教程结合animate.css时候，出现问题，官方教程：

<p v-show="ok" class="animated" transition="bounce">Watch me bounce</p>
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没有动画效果

尝试

1. 我去掉transition="bounce"，这个demo正常

2. 我用编写css的方法去写动画，动画效果完美实现，无bug

3. 如果原来没有list的话代码无任何问题，在原来有list存在的情况下，刷新页面才会出现问题

demo地址

https://github.com/zhanfang/vue-todomvc
在index.html中把注释的代码打开，并把index.css中的bounce相关代码注释掉就可以看到效果

Answer 1

好吧，我要打自己一巴掌，其实这个问题很简单，必须把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>