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

zhanfang
  • 578

问题

在改进官方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没有动画效果

图片描述

尝试

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

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

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

demo地址

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

回复
阅读 9.1k
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>
宣传栏