Vue ＜transition-group＞多组table滚动显示数据过渡效果案例

zbailing

已于 2022-03-10 09:54:16 修改

阅读量241

点赞数

分类专栏： Vue 文章标签： vue.js javascript ecmascript

于 2022-03-07 10:52:12 首次发布

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

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue <transition-group> 多组table滚动显示数据 过渡效果案例</title>
    <style>
        .table {
            margin-top: 50px;
        }
        .list-complete-item td {
            border-top: 1px solid #ddd;
            padding: 8px;
            width: 150px;
        }

        /* 以下为css过渡属性 */
        .list-complete-item {
            transition: all 1s;
        }
        .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设置id，需要给哪个元素设置onmouseover和onmouseout，就给哪个元素设置id  -->
    <table id="scrollEle" class="table">
        <!--    为了应用css过渡效果，必须给tbody设置name属性    -->
        <tbody is="transition-group" name="list-complete">
        <!--    必须设置class="list-complete-item" css过渡效果才能生效    -->
        <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>

    <table id="scrollEle2" class="table">
        <tbody is="transition-group" name="list-complete">
        <tr
                v-for="(item,index) in items2"
                v-bind:key="item.txt"
                class="list-complete-item"
                v-if="index < 4"
        >
            <!-- 当前只显示 3 条数据 -->
            <td>
                {{ item.txt }}
            </td>
            <td>
                {{ item.num }}
            </td>
        </tr>
        </tbody>
    </table>

</div>
<script src="./js/jquery-3.6.0.min.js"></script>
<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},
            ],
            items2: [
                {txt: 'dog', num: 1},
                {txt: 'cat', num: 2},
                {txt: 'elephant', num: 3},
                {txt: 'monkey', num: 4},
                {txt: 'tiger', num: 5},
                {txt: 'lion', num: 6},
            ],

        },
        mounted() {
            // 第一个参数是数组数据，第二是需要添加 mouseover 和 mouseout 事件的元素
            this.setScrollAni(this.items, '#scrollEle');
            this.setScrollAni(this.items2, '#scrollEle2');
        },
        methods: {
            // 滚动显示数据
            exchange(items) {
                let self = this;
                let firstEle = items[0];
                items.splice(0, 1);
                items.splice(items.length, 0, firstEle);
            },
            setIntervalScroll(items, intervalName) {
                let self = this;
                if (self[intervalName]) {
                    clearInterval(self[intervalName])
                }
                self[intervalName] = setInterval(function () {
                    self.exchange(items);
                }, 1500)
            },
            setScrollAni(items, ele) {
                let self = this;
                let intervalName = ele.slice(1) + 'Inter'; // 由ele定义一个setInterval()的返回值
                self.setIntervalScroll(items, intervalName)

                $(ele).on('mouseover', function () {
                    if (self[intervalName]) {
                        clearInterval(self[intervalName])
                    }
                })
                $(ele).on('mouseout', function () {
                    self.setIntervalScroll(items, intervalName)
                })
            },

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

zbailing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue ＜transition-group＞多组table滚动显示数据过渡效果案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue <transition-group> 多组table滚动显示数据过渡效果案例</title> <style> .table { margin-top: 50px; } ...
复制链接

扫一扫