脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue折叠展开收缩动画

vue实现折叠展开收缩动画效果

 更新时间：2023年11月14日 11:31:07   作者：ps酷教程  
这篇文章主要介绍了vue实现折叠展开收缩动画,通过scrollHeight实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

学习链接

vue项目列表折叠面板动画效果实现
element-ui之el-collapse-transition（折叠展开动画）源码解析学习

通过scrollHeight实现

在这里插入图片描述

以下代码注意两点

  • trainsition是需要有两个值，才能产生过渡动画的，所以一开始就需要获取到box1的高度（通过scrollHeight去获取它的高度）
  • box1收缩，其实就是把它的height改为0，超出部分隐藏，这样子元素就隐藏了（但是注意，这个时候，仍然可以通过scrollHeight获取到box1的实际高度，尽管它的style的height已经是0了）
<template>
    <div>
        <el-button plain type="danger" @click="toggleDiv" size="mini" style="margin-bottom: 10px;" >toggleDiv</el-button>
        <div class="box1" ref="box1" id="box1">
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Collapse',
    components: {
    },
    data() {
        return {
            isCollapse: false,
        }
    },
    mounted() {
        // 刚开始的时候, 就必须先获取到这个元素的高度(transition需要有两个数值才能产生过渡), 它必须刚开始就是可见的(不能display:none)
        console.log('mounted', this.$refs['box1'].scrollHeight);
        this.$refs['box1'].style.height = this.$refs['box1'].scrollHeight + 'px'
    },
    methods: {
        toggleDiv() {
            this.isCollapse = !this.isCollapse
            if(this.isCollapse) {
                this.$refs['box1'].style.height = 0
            } else {
                // 这个时候，box1已经收缩了，但是需要展开，那就必须获取到它的高度(此时它的style的height为0)
                console.log( this.$refs['box1'].scrollHeight);
                this.$refs['box1'].style.height = this.$refs['box1'].scrollHeight + 'px'
            }
        }
    }
}
</script>
<style>
.box1 {
    width: 200px;
    /* height: 200px; */
    background-color: #bfa;
    transition: height 0.28s;
    overflow: hidden;
}
.box1 .box1-item {
    height: 20px;
    border: 1px solid red;
}
</style>

通过js获取auto时的高度去实现（效果不好）

虽然，实现效果并不怎么好，但是比较巧妙，它通过js设置height为auto，然后就可以获取元素的自然高度。这种获取高度的方式可以借鉴下

<template>
    <div>
        <el-button plain type="danger" @click="toggleDiv" size="mini" style="margin-bottom: 10px;" >toggleDiv</el-button>
        <div class="box1" ref="box1" id="box1">
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Collapse',
    components: {
    },
    data() {
        return {
            isCollapse: false,
        }
    },
    mounted() {
        console.log(this.$refs['box1'].scrollHeight); // 110
        this.$refs['box1'].style.height = 'auto'
        this.$refs['box1'].style.height = window.getComputedStyle(this.$refs['box1']).height
    },
    methods: {
        toggleDiv() {
            this.isCollapse = !this.isCollapse
            if(this.isCollapse) {
                this.$refs['box1'].style.height = 0
            } else {
                this.$refs['box1'].style.height = 'auto'
                let height = window.getComputedStyle(this.$refs['box1']).height
                // 这里修改的太快，transition都还没开始做动画
                this.$refs['box1'].style.height = 0
                this.$refs['box1'].style.height = height
            }
        }
    }
}
</script>
<style>
.box1 {
    width: 200px;
    background-color: #bfa;
    overflow: hidden;
}
.box1 .box1-item {
    height: 20px;
    border: 1px solid red;
}
</style>

优化

要使用setTimeout，才能在展开的时候，有过渡效果，不然两个修改高度的js在一起，它是不会有过渡的，可能跟浏览器的渲染有关系

<template>
    <div>
        <el-button plain type="danger" @click="toggleDiv" size="mini" style="margin-bottom: 10px;" >toggleDiv</el-button>
        <div class="box1" ref="box1" id="box1">
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
            <div class="box1-item"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Collapse',
    components: {
    },
    data() {
        return {
            isCollapse: false,
            styleObj: {}
        }
    },
    mounted() {
        console.log(this.$refs['box1'].scrollHeight); // 110
        this.$refs['box1'].style.height = 'auto'
        this.$refs['box1'].style.height = window.getComputedStyle(this.$refs['box1']).height
    },
    methods: {
        toggleDiv() {
            this.isCollapse = !this.isCollapse
            if(this.isCollapse) {
                this.$refs['box1'].style.height = 0
            } else {
                this.$refs['box1'].style.height = 'auto'
                let height = window.getComputedStyle(this.$refs['box1']).height
                console.log(height,1);
                this.$refs['box1'].style.height = 0
                setTimeout(()=> {
                    this.$refs['box1'].style.height = height
                })
            }
        }
    }
}
</script>
<style>
.box1 {
    width: 200px;
    background-color: #bfa;
    overflow: hidden;
    transition: all 0.5s;
}
.box1 .box1-item {
    height: 20px;
    border: 1px solid red;
}
</style>

通过grid实现

注意下面的grid网格布局是加给外面的这个容器，外面这个容器从0fr到1fr会产生动画。overflow:hidden是加给里面的这个div。这样就能实现从0->auto的高度变化过渡效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .quick-example {
            margin: 1rem;
            padding: 1rem;
            background: hsl(200, 50%, 50% );
            border-radius: 0.5rem;
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.5s;
        }
        .quick-example>div {
            overflow: hidden;
        }
        .quick-example:hover {
            grid-template-rows: 1fr;
        }
    </style>
</head>
<body>
    <div class="quick-example">
        <div>
            this is amazing!
            this is amazing!
            this is amazing!
            this is amazing!
            this is amazing!
            this is amazing!
            this is amazing!
            this is amazing!
        </div>
    </div>
    <div>
    	[一段很长的文字Lorem1000]
    </div>
</body>
</html>

到此这篇关于vue实现折叠展开收缩动画的文章就介绍到这了,更多相关vue折叠展开收缩动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 解决基于 keep-alive 的后台多级路由缓存问题

    解决基于 keep-alive 的后台多级路由缓存问题

    这篇文章主要介绍了解决基于 keep-alive 的后台多级路由缓存问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • vuex中store存储store.commit和store.dispatch的区别及说明

    vuex中store存储store.commit和store.dispatch的区别及说明

    这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 详解vue为什么要求组件模板只能有一个根元素

    详解vue为什么要求组件模板只能有一个根元素

    这篇文章主要介绍了vue为什么要求组件模板只能有一个根元素，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-07-07
  • 详解vue中的computed的this指向问题

    详解vue中的computed的this指向问题

    这篇文章主要介绍了详解vue中的computed的this指向问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue3 父子组件间相互传值方式

    vue3 父子组件间相互传值方式

    这篇文章主要介绍了vue3 父子组件间相互传值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • VUE使用ElementUI下拉框 @change事件数据不回显问题

    VUE使用ElementUI下拉框 @change事件数据不回显问题

    这篇文章主要介绍了VUE使用ElementUI下拉框 @change事件数据不回显问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • vuex中this.$store.commit和this.$store.dispatch的基本用法实例

    vuex中this.$store.commit和this.$store.dispatch的基本用法实例

    在vue的项目里常常会遇到父子组件间需要进行数据传递的情况,下面这篇文章主要给大家介绍了关于vuex中this.$store.commit和this.$store.dispatch的基本用法的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue访问未定义的路由时重定向404问题

    vue访问未定义的路由时重定向404问题

    这篇文章主要介绍了vue访问未定义的路由时重定向404问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue3封装京东商品详情页放大镜效果组件

    vue3封装京东商品详情页放大镜效果组件

    这篇文章主要为大家详细介绍了vue3封装类似京东商品详情页放大镜效果组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 一个vue组件库发布到npm的完整实现过程

    一个vue组件库发布到npm的完整实现过程

    工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢,下面这篇文章主要给大家介绍了关于一个vue组件库发布到npm的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论