Question

jsffidle

  <div class="container">
   <input placeholder="find PLEASE" v-model="search" />
   <transition-group name="fade">
    <div v-for="(item, index) in filteredItems" :key="index" class="container__item">{{ item }}</div>

.container {
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;

}
new Vue({
el: '.container',
 data() {
return {
  search: '',
   items: ['lorem opas', 'opas loram ', 'mushroms so good']
   }
},
computed: {
 filteredItems() {
  return this.items.filter(item => item.indexOf(this.search) > -1)
}
}
})

为什么过渡组动画不起作用？所有项目都有一个唯一的密钥，我也得到了transition-group的名称。

Answer 1

您的过渡实际上是有效的，但是您还没有为其指定任何样式。

来自official documentation：

插入包含在过渡组件中的元素时   删除，这是发生的事情：

Vue会自动嗅探目标元素是否有CSS   应用过渡或动画。如果是这样，CSS过渡类   将在适当的时间添加/删除。

为了使您的示例有效，您可以这样：

＆＃13;

new Vue({
  el: '.container',
  data() {
    return {
      search: '',
      items: [
      	'lorem opas', 
        'opas loram ', 
        'mushroms so good'
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
      	item.indexOf(this.search) > -1
      )
    }
  }
})

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="container">
  <input placeholder="find PLEASE" v-model="search" />
  <transition-group name="fade">
    <div class="container__item" 
      v-for="(item, index) in filteredItems" 
      :key="index"
    >
      {{ item }}
    </div>
  </transition-group>
</div>

＆＃13;

缺少的只是CSS过渡类。

<transition-group name="fade">

在这种情况下，指定的名称应该是所有css类的前缀。目前，vue使用了6 transition classes，对于上面的示例，它将是以下内容：

淡入输入
淡入进入活性
淡入进入到
淡入假
淡入离开活性
淡入离开到

另请注意，您可以在应用中与此transition-group的多个实例共享相同的类。

为什么过渡组不工作？

1 个答案: