表行上的 Vuejs 转换

Question

我试图在 html 表格行 (vue.js) 上进行转换（动画）但没有成功。这是完整的例子

   new Vue({
    el: '#data',
    data: {
      items: [
        {
          data: 'd1',
          more: false
        },
        {
          data: 'd2',
          more: false
        },
      ]
    }

  });

 .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
      }
      .fade-enter, .fade-leave-to  {
        opacity: 0
      }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

    <div class="container-fluid" id="data">
      <br>
      <br>
      <table border="1" class="table table-bordered">
        <thead class="thead-inverse">
          <tr>
            <th>anim</th>
          </tr>
        </thead>
        <tbody>
        <template v-for="item, k in items">
          <tr>
            <td><button @click="item.more = !item.more" type="button"
                         v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn">Show the hidden row</button></td>
          </tr>

          <transition name="fade" >
            <tr  v-bind:key="item" v-if="item.more">
              <td><p >{{k + 1}} - {{item.data}}</p></td>
            </tr>
          </transition>

        </template>
        </tbody>
      </table>
    </div>

我希望隐藏的表行在出现时应该在不透明度属性上出现过渡/动画，但什么也没有发生，我应该怎么做？这非常适用于另一个元素，如 span 或其他。

原文由 Michael 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

因此，首先我想指出，如果您使用了 _字符串模板_，那么您问题中的代码将按 _原样运行_。

 console.clear()
new Vue({
    el: '#data',
    template: `
     <div>
          <br>
      <br>
      <table border="1" class="table table-bordered">
        <thead class="thead-inverse">
          <tr>
            <th>anim</th>
          </tr>
        </thead>
        <tbody>
        <template v-for="item, k in items">
          <tr>
            <td><button @click="item.more = !item.more" type="button"
                         v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn">Show the hidden row</button></td>
          </tr>

          <transition name="fade" >
            <tr  v-bind:key="item" v-if="item.more">
              <td><p >{{k + 1}} - {{item.data}}</p></td>
            </tr>
          </transition>

        </template>
        </tbody>
      </table>
      </div>
    `,
    data: {
      items: [
        {
          data: 'd1',
          more: false
        },
        {
          data: 'd2',
          more: false
        },
      ]
    }

  });

 .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
      }
      .fade-enter, .fade-leave-to  {
        opacity: 0
      }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

    <div class="container-fluid" id="data">

    </div>

请注意，此示例中所做的 唯一 更改是我将 Vue 的模板转换为字符串，而不是在 DOM 中定义模板。这个单一更改起作用的原因是，当您使用“在 DOM 中”模板时，在 Vue 将模板转换为渲染函数 _之前_，您需要浏览器解析 HTML。当您使用 table 元素时，浏览器对于允许在表格内呈现的元素类型非常挑剔； generally, only elements related to tables ( thead , tbody , tr , td , etc.). transition 显然 不是 它相处的元素（尽管，有点令人惊讶的是，它不会窒息 template ）。

但是，字符串模板永远不会被浏览器解析，它们会直接转换为渲染函数，因此它们会像您编写的那样工作。所以我的第一个建议是， 只使用字符串模板。

但是，如果您想继续使用 DOM 模板，我们需要对代码进行一些更改。首先，我们需要将过渡移动到浏览器满意的地方。使用表格，我们可以轻松地通过将其移动到 tbody 标记并使用 Vue 的特殊 is 指令来实现。其次，因为我们的过渡现在将应用于多个元素，我们需要将其切换为 transition-group 。

因为我们使用的是 transition-group 转换中的每个元素都 必须 有一个键。因此，对于每一行，我们只需为该行添加一个键。

 console.clear()
new Vue({
  el: '#data',
  data: {
    items: [{
        data: 'd1',
        more: false
      },
      {
        data: 'd2',
        more: false
      },
    ]
  }

});

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

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>

<div class="container-fluid" id="data">
  <br>
  <br>
  <table border="1" class="table table-bordered">
    <thead class="thead-inverse">
      <tr>
        <th>anim</th>
      </tr>
    </thead>
    <tbody  name="fade" is="transition-group">
      <template v-for="item, k in items">
          <tr v-bind:key="`button-${item.data}`">
            <td>
              <button @click="item.more = !item.more"
                      type="button"
                      v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']"
                      class="btn">Show the hidden row
              </button>
            </td>
          </tr>
          <tr  v-bind:key="`detail-${item.data}`" v-if="item.more">
            <td><p >{{k + 1}} - {{item.data}}</p></td>
          </tr>
        </template>
    </tbody>
  </table>
</div>

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试完全删除 标签并改为这样做：

  <tr name="fade" is="transition" v-bind:key="item.data" v-if="item.more">

来源： https ://github.com/vuejs/vue/issues/3907#issuecomment-253111682

小提琴： https ://jsfiddle.net/c8vqajb4/3/

更新：

我们最终使用了一个过渡组：

 <tbody name="fade" is="transition-group">
    <tr class="row" v-bind:key="item.data" v-if="item.more">
      <td><p >{{k + 1}} - {{item.data}}</p></td>
     </tr>
</tbody>

正如这里所建议的： https ://v2.vuejs.org/v2/guide/transitions.html#List-Transitions

小提琴： https ://jsfiddle.net/c8vqajb4/4/

原文由 Adam Soltys 发布，翻译遵循 CC BY-SA 4.0 许可协议