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>

優(yōu)化

要使用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折疊展開收縮動畫內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: