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

Question

对于使用计算属性过滤的项目列表，每次列表为 filtered/updated 时，如何在结果标记 {{ 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 变化时被替换并且动画不会运行因为：

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s compiler will only replace the content of the element for efficiency.

所以你需要给strong元素添加一个key属性并使用一个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 - 计算过滤列表更改时触发动画

Vue - Trigger animation when computed filtered list changes

vue.js

vue-transitions

Revised CodePen