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

已于 2022-04-14 12:55:46 修改
阅读量1.4k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-03-10 13:23:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zbailing/article/details/123399232
版权

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue <transition-group> 多组table滚动显示数据 过渡效果案例2</title>
    <!--
      上篇文章的代码，实际使用中发现有bug
      比如：如果文本过长，有需要折行的文本，在滚动时，会因为position:absolute;溢出元素外
      此时需要给外层元素套上position: relative;才能好使

      另外，此案例中的css过渡效果在遇到table元素时，
      因为 td 为 table-cell元素 ，样式不好控制，
      所以还是会有bug
      此时建议：
      将table、tbody、td设置为block元素
      将tr设置为flex元素
      这样，样式就好调了，当然也可以用 div 模拟 table 元素
      -->
    <style>
        .container {
            width: 200px;
        }

        .table {
            display: block;
            margin-top: 50px;
            width: 100%;
        }

        .table tbody {
            display: block;
            /* 为 tr 设置 position: absolute;后，导致tr元素溢出，此时需要为 tbody 设置 position: relative; tr元素就不会溢出了 */
            position: relative;
        }

        .list-complete-item {
            display: flex;
        }

        .list-complete-item td {
            display: block;
            border-bottom: 1px solid #ddd;
            padding: 8px;
        }

        .list-complete-item td:first-child {
            flex: 1;
        }

        .list-complete-item td:last-child {
            width: 50px;
        }

        /* 以下为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);
        }

        /* 如果不为tr设置 position: absolute; 表格的滚动动画会略显生硬 */
        .list-complete-leave-active {
            /* 为 display: table-row;元素 设置 position: absolute; 后，浏览器会自动将其改为 display: block;元素 */
            position: absolute;
            width: 100%;
        }
    </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">
    <div class="container">
        <!--  这里必须给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>


</div>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {txt: 'apple is a big 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 和 transition-group实现过渡动画
10-16
本文给大家分享一下vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版，本文给大家介绍的非常详细，具有一定的参考借鉴价值，...
vue-transition-component:为vue.js组件提供GreenSock过渡功能
05-09
yarn add vue-transition-component npm i -S vue-transition-component 文献资料 例子 我提供了一个示例设置，您可以在其中看到过渡控制器的运行情况，按照以下步骤运行项目： git clone ...
Vue学习：元素、组件、列表过度与动画封装
Derrick
11-07 236
Vue学习：元素、组件、列表过度与动画封装   一、多个元素过度 1.1 点击切换，此时点击style中的动画并没有出现 由于Vue是尽可能的复用DOM元素，所以这时候动画并不会出现 <style> .v-enter,.v-leave-to{ opacity: 0; } ...
Vue3过渡&动画：列表的过渡及例子
米儿的博客
07-09 1247
目前为止，过渡动画我们只要是针对单个元素或者组件的： 要么是单个节点； 要么是同一时间渲染多个节点中的一个； 那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？ 这个时候我们要使用 <transition-group> 组件来完成； 使用<transition-group> 有如下的特点： 默认情况下，它不会渲染一个元素的包裹器，但是你可以指定一个元素并以 tag attr...
Vue.js 中的过渡动画是什么？如何使用过渡动画？
最新发布
it_xushixiong的博客
06-05 909
在 Vue.js 中，过渡动画是一种在元素插入、更新或删除时自动应用的动画效果。Vue.js 中的过渡动画可以使用 CSS3 动画或 JavaScript 动画来实现，可以为应用程序增加一些动态和生动的效果。Vue.js 中过渡动画的实现方式是通过transition和animated等组件来实现的。在使用过渡动画时，需要将要过渡的元素包裹在transition或animated组件中，并在组件中定义过渡的动画效果。例如：</</在上面的代码中，我们使用了 Vue.js 的transition。
Vue3官网-过渡&动画（十）gsap、列表过渡（\＜transition-group＞、tag、FLIP技术、v-move、动态过度、可复用过渡）、状态过渡（第三方库gsap、把过渡放在子组件）
qq_43456781的博客
09-22 849
Vue3官网-过渡&动画（二）gsap、列表过渡（<transition-group>、tag、FLIP技术、v-move、动态过度、可复用过渡）、状态过渡（第三方库gsap、把过渡放在子组件） 文章目录Vue3官网-过渡&动画（二）gsap、列表过渡（\、tag、FLIP技术、v-move、动态过度、可复用过渡）、状态过渡（第三方库gsap、把过渡放在子组件）1. 列表过渡列表的进入/离开过渡列表的移动过渡列表的交错过渡可复用的过渡动态过渡2. 状态过渡状态动画与侦听器动态状态
transition-group 原理详解
coinisi_li的博客
09-16 1898
最后讲下 transition-group 组件的 beforeMount 钩子，由于 updateChildren 函数会对元素进行移动，最终导致删除的节点很可能已经不在原来的位置上，所以重写了 _update 函数，执行了两次 patch 函数，第一次 patch 只删除所有需要删除的节点，不作移动（将 removeOnly 参数设置为 true），然后触发删除节点的 leaving 过渡（如此删除的节点在执行动画时，位置是正确的）；第二次 patch 就插入新节点或者移动节点到最终态。
Vue原生无缝上下滚动组件transition-group使用心得
zbwroom的博客
08-20 9279
首先我们先看看效果 其次我们开始造数据 let nameList = [ '电风**啦', '你***包', '十二****就', '高****爸', '南城旧****梦', '别理我理我****我', '诺****曦', '悲欢****女', '一枫****书', '尹雨****沫', '呆橘****橘', '困****倦', ]; let prizeList...
TransitionGroup 使用
weixin_53137201的博客
11-14 2615
TransitionGrounp 是 Vue 官方推出的一个内置组件，用于对 v-for 列表中的元素或组件的插入，移除和顺序改变添加动画效果；使其界面看起来交互性更加的好，作者本人也是在做了几个项目之后，有一天在研究如何提高整个项目的交互性，因此学到了此知识，在这里就将使用方式和自己的一些心得分享出来，同一些前端小伙伴进行交流。
vue3学习笔记之Transition&TransitionGroup
小多的博客
01-10 1682
height : 0;} .to {传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如
Vue ＜transition-group＞ table滚动显示数据 过渡效果案例(vue.js版)
zbailing的博客
03-04 593
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue <transition-group> table滚动显示数据 过渡效果案例</title> <style> .list-complete-item { transition: all 1s;...
使用transition-group实现点击上下移动div的效果
qq_41821445的博客
04-19 509
首先使用transition-group时有一点要注意，就是key必须填写唯一且稳定的值，不能为数组的索引，下面图片是html部分 点击事件的方法如下图，该方法是通过splice去改变数组的排序 最终效果如下
vue之a-table中实现清空选中的数据
12-13
如下所示： <template> <a> </a-ta
vue-pivot-table-数据透视表的vue组件-Vue.js开发
05-27
vue-pivot-table数据透视表Live演示（jsfiddle）的vue组件安装npm install --save @ marketconnect / vue-pivot-table组件此项目vue-pivot-table数据透视表Live演示（jsfiddle）的vue组件npm install --save @ ...
To install it, you can run: npm install --save core-js/modules/es.regexp.dot-all.js
zbailing的博客
11-17 1453
解决方法： cnpm i [email protected] --save 重新运行好使
Vue ＜transition＞ 通过动态name属性实现动态过渡案例
zbailing的博客
03-10 1090
<!-- Vue <transition> 通过动态name属性实现动态过渡案例 --> <template> <div class="page"> <p> <button @click="switchTransName">switch transitionName</button> </p> <transition :name="tranName"...
Vue ＜transition＞ 通过事件钩子实现动态过渡案例2
zbailing的博客
03-09 841
<!-- Vue <transition> 通过事件钩子实现动态过渡案例2 --> <template> <div class="page"> <p> fade in <input type="range" min="0" :max="fadeMax" v-model="fadeInVal"/> fade out <input type="range" min="0" :max="fad...
Vue ＜transition＞多个元素过渡 css过渡使用案例
zbailing的博客
02-22 724
<!-- Vue <transition>多个元素过渡 css过渡使用案例 --> <template> <div class="page"> <transition name="tra"> <!-- 当有相同标签的元素切换时，需要通过key属性设置唯一的值来标记它们，以此让Vue能过区分它们， 否则Vue为了效率只会替换相同标签内部的内容 --> <bu.
又报错了<transition-group> children must be keyed: <keep-alive>
05-20
这个错误通常是因为在使用 Vue.js 的 Transition 组件时，没有为其中的子元素设置唯一的 key 属性。 你可以尝试在你的代码中查找到使用了 <transition-group> 和 <keep-alive> 组件的地方，并在它们的子元素中添加 key 属性。例如： ```html <transition-group> <div v-for="item in items" :key="item.id"> {{ item.text }} </div> </transition-group> <keep-alive> <router-view :key="$route.fullPath"></router-view> </keep-alive> ``` 这里的 `:key` 属性值可以是一个唯一的标识符，比如数据中的 `id` 字段或者当前路由的完整路径。这样做可以让 Vue.js 更好地追踪组件的状态变化，从而避免出现类似的错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值