transition-group在table表格中失效的问题

时间 2019-11-29

标签 transition group table 表格失效问题繁體版

原文原文链接

#持续划水中#

本文章仅用做于我的学习笔记复制代码

划重点 —— 我的笔记！(◔◡◔)javascript

参考文章：（墙）Vuejs transition on table rowscss

最终效果图：html

今天在学习 Vue的过渡&动画的时候遇到了一个困扰了一下午的问题。
vue

在根据官方文档提供的列表过渡中尝试给以前写的一个表格demo中的<tbody>下的<tr>行添加过渡效果的时候发现，过渡并无出现。看着列表过渡的介绍仿佛代码也没有错啊(๑òᆺó๑)。代码以下：java

/* 过渡的自定义的类名 */
.demo-enter,
.demo-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.demo-enter-active,
.demo-leave-active {
    transition: all 0.5s ease;
}
        
.demo-move {
    transition: all 0.5s ease;
}

<!-- HTML table部分 -->
<table class="table table-striped table-inverse table-bordered">
    <thead class="thead-inverse">
        <tr>
            <th>ID</th>
            <th>品牌名称</th>
            <th>添加时间</th>
            <th>功能</th>
        </tr>
    </thead>
    <tbody>
        <transition-group name="demo" appear>
            <tr v-for="item in getFilter(key)" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.mTime}}</td>
                <td><a href="javascript:;" @click="handleDelect(item.id)">删除</a></td>
            </tr>
        </transition-group>
    </tbody>
</table>复制代码

对比官方文档仍没找到错误，因而打开审查元素，发现......
npm

这个空的span标签（红框位置）是哪来的？？？bootstrap

<tbody>下不是应该有一个由transition-group默认生成的<span>标签包着的吗？咋不见了？？难道是渲染到了上面莫名其妙出来的那个<span>标签那里了？？？api

为了验证这个<span>元素是否飘了，因而给transition-group默认生成的<span>元素经过tag属性改了个起名很随便的元素<testdiv>并从新打开了审查元素：bash

<transition-group name="demo" appear tag="testdiv">
    ...
</transition-group>
复制代码

还真是你飘了。。。app

官方文档的解释：

解析 DOM 模板时的注意事项

原来，在table里使用<transition-group>的时候，生成的真实元素<testdiv>之因此会脱离table标签，并插到了table标签前，是由于这个 <transition-group> 组件会被做为无效的内容提高到外部，并致使最终渲染结果出错。

这里官方文档给出了一个解决办法：

特殊特性 is ：

因而我给<tbody>中添加这个 is 特性。因为是在<tbody>中用 is 添加的 transition-group ,所以也不会再默认生成一个<span>元素。

<tbody is="transition-group" name="demo" appear>
    <tr v-for="item in getFilter(key)" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.mTime}}</td>
        <td><a href="javascript:;" @click="handleDelect(item.id)">删除</a></td>
    </tr>
</tbody>复制代码

查看效果：

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        [v-cloak] {
            display: none;
        }

        #app {
            width: 700px;
        }

        .demo-enter,
        .demo-leave-to {
            opacity: 0;
            transform: translateY(20px);
        }

        .demo-enter-active,
        .demo-leave-active {
            transition: all 0.5s ease;
        }

        .demo-move {
            transition: all 0.5s ease;
        }
    </style>
</head>

<body>

    <div id="app" v-cloak>

        <div class="input-group">
            <input v-model="id" type="text" class="form-control" placeholder="请输入品牌ID" aria-label="Recipient's username"
                aria-describedby="basic-addon2">
            <input v-model="name" @keyup.enter="handleSubmit" type="text" class="form-control" placeholder="请输入品牌名称"
                aria-label="Recipient's username" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <button @click="handleSubmit" class="btn btn-outline-secondary" type="button">添加</button>
            </div>

            <input v-model.trim="keywords" @keyup.enter="search" type="text" class="form-control" placeholder="搜索品牌"
                aria-label="Recipient's username" aria-describedby="basic-addon2">

            <div class="input-group-append">
                <button @click="search" class="btn btn-outline-secondary" type="button">搜索</button>
            </div>
        </div>

        <table class="table table-striped table-inverse table-bordered">
            <thead class="thead-inverse">
                <tr>
                    <th>ID</th>
                    <th>品牌名称</th>
                    <th>添加时间</th>
                    <th>功能</th>
                </tr>
            </thead>
            <tbody is="transition-group" name="demo" appear>
                <tr v-for="item in getFilter(key)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.mTime}}</td>
                    <td><a href="javascript:;" @click="handleDelect(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                id: "",
                name: "",
                mTime: "",
                key: "",
                keywords: "",
                list: [
                    {
                        id: "1",
                        name: "MEIZU",
                        mTime: new Date().toLocaleString()
                    },
                    {
                        id: "2",
                        name: "MI",
                        mTime: new Date().toLocaleString()
                    },
                    {
                        id: "3",
                        name: "VIVO",
                        mTime: new Date().toLocaleString()
                    }
                ],
            },
            methods: {
                handleSubmit() {
                    var phone = {
                        id: this.id,
                        name: this.name,
                        mTime: new Date().toLocaleString()
                    };
                    this.id = this.name = "";
                    this.list.push(phone);
                    // 每次点击均更新list的值
                    this.search();
                },
                handleDelect(id) {
                    this.list.some((item, i) => {
                        if (item.id == id) {
                            this.list.splice(i, 1);
                            return true;
                        }
                    })
                    // 每次点击均更新list的值
                    this.search();
                },
                getFilter(key) {
                    if (this.keywords == "") {
                        this.key = this.keywords;
                    }
                    return this.list.filter(item => item.name.includes(this.key));
                },
                search() {
                    this.key = this.keywords;
                }

            }
        })
    </script>

</body>

</html>复制代码

----------------END

刚开始遇到这个问题，百度关键词使用transition-group的注意事项时一直找不到有效的方法。思考是否是 bootstrap 的 table （我也不知道为何会以为时bs的问题，但也算是误打误撞找到方法了◔◡◔）有问题的时候，百度以 table transition-group 为关键词进行搜索，翻了几页也没有找到解决方法（如今搜索第一页第一个就是解决的方法了，有点神奇。传送门）。实在没找到方法后打开了google，搜索 table transition-group 。emmm，一页下来点开前三个，都是能解决的方法（这里得批评一下百度，要说第三个搜索结果链接被墙了百度搜不到还好说，但前两个都是gayhub里的，咋百度的时候就没出这两个链接呢 ´◔‸◔` ）。

也所以才知道，早在2016年，尤雨溪大神已经在vuejs的Issuse中有回答了。。。而且官方文档中也有特殊特性 is 这个API的说明。。。API文档仍是得多翻翻 - -

果真仍是我太水了(||๐_๐)