Vue ＜transition-group＞ table滚动显示数据过渡效果案例(vue.js版)

本文链接：https://blog.csdn.net/zbailing/article/details/123279379

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue <transition-group> table滚动显示数据 过渡效果案例</title>
    <style>
        .list-complete-item {
            transition: all 1s;
        }

        .list-complete-item td {
            border-top: 1px solid #ddd;
            padding: 8px;
            width: 150px;
        }

        .list-complete-leave-to
            /* .list-complete-leave-active for below version 2.  1.8 */
        {
            opacity: 0;
            transform: translateY(-30px);
        }

        .list-complete-enter
            /* .list-complete-leave-active for below version 2.  1.8 */
        {
            opacity: 0;
            transform: translateY(30px);
        }

        .list-complete-leave-active {
            position: absolute;
        }


    </style>
    <script src="./js/vue.js"></script>
    <script src="./js/lodash.min.js"></script>
</head>
<body>
<!--
在上一篇文章中，上传了一个table滚动显示数据 过渡效果案例，
但后来在实际使用时发现，此过渡效果只有在纯Vue项目中才能生效，
如果在页面中直接引入vue.js，则过渡效果不好使，
上网查找了资料，解决方法是用 is 摆脱默认行为
具体资料请参考：https://blog.csdn.net/qq_34979346/article/details/99318874
-->
<div id="app">
    <table @mouseover="onMouseOverTable" @mouseout="onMouseOutTable">
        <tbody is="transition-group" name="list-complete">
            <tr
                    v-for="(item,index) in items"
                    v-bind:key="item.txt"
                    class="list-complete-item"
                    v-if="index < 3"
            >
                <!-- 当前只显示 3 条数据 -->
                <td>
                    {{ item.txt }}
                </td>
                <td>
                    {{ item.num }}
                </td>
            </tr>
        </tbody>
    </table>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {txt: 'apple', num: 1},
                {txt: 'banana', num: 2},
                {txt: 'tomatoes', num: 3},
                {txt: 'strawberry', num: 4},
                {txt: 'orange', num: 5},
                {txt: 'grape', num: 6},
            ],
            scrollName: null

        },
        mounted() {
            this.setScrollAni();
        },
        methods: {
            exchange() {
                let self = this;
                let firstEle = this.items[0];
                this.items.splice(0, 1);
                self.items.splice(self.items.length, 0, firstEle);
            },
            setScrollAni() {
                let self = this;
                if (self.scrollName) {
                    clearInterval(self.scrollName)
                }
                self.scrollName = setInterval(function () {
                    self.exchange();
                }, 1500)
            },
            onMouseOverTable() {
                let self = this;
                if (self.scrollName) {
                    clearInterval(self.scrollName)
                }
            },
            onMouseOutTable() {
                this.setScrollAni()
            }

        }
    })
</script>
</body>
</html>