时间戳

首页 > 解决方案 > 为什么过渡组不起作用？

javascript - 为什么过渡组不起作用？

问题描述

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)
}
}
})

为什么过渡组动画不起作用？所有项目都有一个唯一的键，我也得到了转换组的名称。

标签： javascriptvue.js

解决方案

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

从官方文档：

当插入或移除包含在过渡组件中的元素时，会发生以下情况：

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

为了使您的示例正常工作，您可以这样做：

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
      )
    }
  }
})
.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;
}
<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>

缺少的只是 CSS 过渡类。

<transition-group name="fade">

在这种情况下，指定的名称应该是所有 css 类的前缀。目前，vue 使用了6 个转换类，对于上面的示例，如下所示：

  1. 淡入淡出
  2. 淡入淡出
  3. 淡入淡出
  4. 淡出
  5. 淡出-离开-活跃
  6. 淡出离开

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

推荐阅读