javascript - Vue js <transition-group> 根本无法开始工作

Question

我一直在 Vue 中尝试一些过渡。我有一个测试应用程序，它从数据库获取，然后使用 v-for 以表格格式显示以填充表格单元格。但过渡组似乎根本不起作用。我有:

<table class="table" v-if="showTable">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
        <transition-group tag="tbody" enter-active-class="animated fadeInDownBig" leave-active-class="animated fadeOutRight">
            <tr v-for="(value, key, index) in detailsData" v-bind:key="key">
                <th scope="row">{{value.details_key}}</th>
                <td>{{value.first_name}}</td>
                <td>{{value.last_name}}</td>
                <td><button class="btn btn-danger" @click="deleteEntry(value.details_key, key, $event)">Delete</button></td>
            </tr>
        </transition-group>
    </table>

我尝试使用的类是 Animate.css 的一部分，它们只需使用标签即可正常工作。我还尝试添加“名称”标签并使用我自己的 css 类，但似乎没有任何效果。

Answer 1

乍一看，IMO 它不起作用，因为您正在尝试对表行进行动画处理 - <tr>标签。这是不可能的。可能的解决办法是使用CSS的display属性来模拟<tr>标签但带有另一个标签 - <div>例如，但使用这样的 CSS:div { display: table-row }找这个post ，我在其中展示了动画表格示例，以及如何在没有 <table> 的情况下创建表格。 ，或任何其他与表格相关的标签。

Vue.component('data-grid', {
  template: '#data-grid',
  props: ['url', 'columns'],
  data () {
    return {
      users: [],
      query: '',
      prevKey: 'id',
      orderDesc: false
    }
  },
  computed: {
    filteredUsers () {
      return _.filter(this.users, user =>
        _.find(user, prop =>
          new RegExp(this.query, 'i').test(prop)
        )
      )
    }
  },
  methods: {
    sortUsers (evt) {
      var key = evt.target.dataset.key
      if (this.prevKey === key) {
        this.users.reverse()
        this.orderDesc = !this.orderDesc
      } else {
        this.users = _.sortBy(this.users, key)
        this.orderDesc = false
        this.prevKey = key
      }
    },
    updateQuery: _.debounce(function (evt) {
      this.query = evt.target.value
    }, 300),
    clearQuery () {
      this.query = ''
    },
    onCreate (elm) {
      elm.style.opacity = 0
    },
    async onData (elm) {
      this.users = await axios
        .get(this.url)
        .then(res => res.data)
      Velocity(elm, "fadeIn", {duration: 600})
    } 
  }
})
 
new Vue({
  el: '#app'
})

.data-grid {
  width: 98%;
  margin: 10px auto;
  padding: 2px;
  background-color: white;
  border: 2px solid #3F51B5;
  overflow: hidden;
}
.table {
  display: table;
  width: 100%;
  font-size: 13px;
  font-family: Arial, sans-serif;
  color: #263238;
  cursor: pointer;
}
.thead {
  display: table-header-group;
}
.tbody {
  display: table-row-group;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  position: relative;
}
.tr .td:not(:last-child) {
  border-right: 2px solid white;
}
.thead .td {
  padding: 5px 14px;
  background-color: #3F51B5;
  color: white;
  font-weight: bold;
  text-align: center;
}
.tbody .td {
  padding: 4px;
  color: #263238;
  text-align: center;
}
.tbody .tr:hover .td {
  background-color: #C5CAE9;
}
.tbody .tr:hover .td:not(:last-child) {
  border-right: 2px solid #C5CAE9;
}
.tools {
  margin: 10px;
  box-sizing: border-box;
}
.tools:after {
  content: "";
  display: block;
  clear: both;
}
.search {
  float: right;
}
.arrow {
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 5px;
  margin-top: 5px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  transition: all .6s;
}
.asc {
  border-bottom: 6px solid white;
}
.desc {
  border-top: 6px solid white;
}
.users-move {
  transition: transform .6s;
}
.users-enter-active, .users-leave-active {
  transition: all .6s;
}
.users-enter, .users-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

<div id="app">
  <data-grid
    url="https://api.mockaroo.com/api/b5f38710?count=8&key=cdbbbcd0"
    :columns="{id: 'ID', nick: 'Nick name', first: 'First name', last: 'Last name'}"
  ></data-grid>
</div>
 
<template id="data-grid">
  <transition
    appear
    v-on:before-appear="onCreate"
    v-on:appear="onData"
  >
    <div class="data-grid">
      <div class="tools"> 
        <div class="search">
          <input
            type="text"
            @input="updateQuery"
            :value="query"
            placehorder="search..."
          >
          <button class="clear" @click="clearQuery">clear</button>
        </div>
      </div>
      <div class="table">
        <div class="thead" @click="sortUsers">
          <div class="tr">
            <span v-for="(col, key) in columns" class="td" :data-key=key>
              {{ col }}
              <span
                v-if="prevKey === key"
                :class="['arrow', orderDesc ? 'desc' : 'asc']">
              </span>
            </span>
          </div>
        </div>
        <transition-group name="users" tag="div" class="tbody">
          <div class="tr" v-for="row in filteredUsers" :key="row.id">
            <span class="td" v-for="column in row">{{ column }}</span>
          </div>
        </transition-group>
      </div>
    </div>
  </transition>
</template>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64110a00011617070b160124554a5c4a57" rel="noreferrer noopener nofollow">[email protected]</a>/underscore-min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16606373562438223822" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1f0617110d3e4e504f48504c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/axios.min.js"></script>