Question

使用通过计算属性过滤的项目列表时，如何在每次过滤/更新列表时在结果标记{{ 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

Answer 1

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

strong元素不会在每次filteredRows.length更改时被替换，并且动画也不会运行，原因是：

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

因此，您需要向key元素添加strong属性，并使用transition mode：

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

最后，为您的过渡名称添加transition classes。

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

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

Vue-计算的过滤列表更改时触发动画

1 个答案:

Revised CodePen