1

使用计算属性过滤的项目列表如何在{{ filteredRows.length }}每次过滤/更新列表时触发结果标记上的动画。

.container#app

  transition name="fade"
    .filter.input-group.mb-3 Results:  
      strong {{ filteredRows.length }}

  .filter.input-group.mb-3  
    input.form-control(type="text" placeholder="Name Filter" v-model="filter_name")

  table.table
    thead
      tr
        th #
        th name
        th age
        th gender
    transition-group.list name="list" tag="tbody"
      tr(v-for="(r, index) in filteredRows.slice(pageStart, pageStart + countOfPage)")
        th {{ (currPage-1) * countOfPage + index + 1 }}
        td {{ r.name }}
        td {{ r.age }}
        td {{ r.gender }}

Javascript

var data = [
  {
    "index": 0, 
    "age": 56, 
    "_id": "574c06e5793fa069d8a9bb7d", 
    "name": "Flowers Harmon", 
    "gender": "male"
  }, 
  {
    "index": 1, 
    "age": 60, 
    "_id": "574c06e543a97c141d304414", 
    "name": "Angie Matthews", 
    "gender": "female"
  }, 
  ...
]
var app = new Vue({
  el: '#app',
  data: {
    rows: data,
    countOfPage: 5,
    currPage: 1,
    filter_name: ''
  },
  computed: {
    filteredRows: function(){
      var filter_name = this.filter_name.toLowerCase();
      return ( this.filter_name.trim() !== '' ) ? 
        this.rows.filter(function(d){ return d.name.toLowerCase().indexOf(filter_name) > -1; }) : 
      this.rows;
    },
    pageStart: function(){
        return (this.currPage - 1) * this.countOfPage;
      },
    totalPage: function(){
      return Math.ceil(this.filteredRows.length / this.countOfPage);
    }
  },
  methods: {
    setPage: function(idx){
      if( idx <= 0 || idx > this.totalPage ){
        return;
      }
      this.currPage = idx;
    },
  },
  // created: function(){
  // }
});

这是一个工作示例 https://codepen.io/ben_jammin/pen/JqQYaM?editors=1010

4

1 回答 1

4

移动transition组件以包裹strong元素。

strong每次更改时元素都不会被替换，filteredRows.length动画也不会运行，因为：

在具有相同标签名称的元素之间切换时，您必须通过赋予它们唯一的键属性来告诉 Vue 它们是不同的元素。否则，Vue 的编译器为了效率只会替换元素的内容。

因此，您需要向元素添加一个key属性strong并使用过渡模式：

  .filter.input-group.mb-3 Results:  
    transition(name="fade" mode="out-in")
      strong(:key="filteredRows.length") {{ filteredRows.length }}

最后，为您的转换名称添加转换类。

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

修改后的 CodePen

于 2019-06-06T20:31:19.730 回答