vue實(shí)現(xiàn)折疊展開收縮動畫效果
更新時間：2023年11月14日 11:31:07 作者：ps酷教程
這篇文章主要介紹了vue實(shí)現(xiàn)折疊展開收縮動畫,通過scrollHeight實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
學(xué)習(xí)鏈接
vue項(xiàng)目列表折疊面板動畫效果實(shí)現(xiàn)
element-ui之el-collapse-transition（折疊展開動畫）源碼解析學(xué)習(xí)
通過scrollHeight實(shí)現(xiàn)
以下代碼注意兩點(diǎn)
- trainsition是需要有兩個值，才能產(chǎn)生過渡動畫的，所以一開始就需要獲取到box1的高度（通過scrollHeight去獲取它的高度）
- box1收縮，其實(shí)就是把它的height改為0，超出部分隱藏，這樣子元素就隱藏了（但是注意，這個時候，仍然可以通過scrollHeight獲取到box1的實(shí)際高度，盡管它的style的height已經(jīng)是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需要有兩個數(shù)值才能產(chǎn)生過渡), 它必須剛開始就是可見的(不能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已經(jīng)收縮了，但是需要展開，那就必須獲取到它的高度(此時它的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時的高度去實(shí)現(xiàn)（效果不好）
雖然，實(shí)現(xiàn)效果并不怎么好，但是比較巧妙，它通過js設(shè)置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在一起，它是不會有過渡的，可能跟瀏覽器的渲染有關(guān)系
<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實(shí)現(xiàn)
注意下面的grid網(wǎng)格布局是加給外面的這個容器，外面這個容器從0fr到1fr會產(chǎn)生動畫。overflow:hidden是加給里面的這個div。這樣就能實(shí)現(xiàn)從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>到此這篇關(guān)于vue實(shí)現(xiàn)折疊展開收縮動畫的文章就介紹到這了,更多相關(guān)vue折疊展開收縮動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能示例
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能,結(jié)合實(shí)例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
vue生成token保存在客戶端localStorage中的方法
本篇文章主要介紹了vue生成token保存在客戶端localStorage中的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關(guān)資料內(nèi)容，具有一定參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了vue中如何通過iframe方式加載本地的vue頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解
這篇文章主要為大家介紹了Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了Vue2.0父子組件傳遞函數(shù)的教程詳解,需要的朋友可以參考下2017-10-10
這篇文章主要為大家學(xué)習(xí)介紹了如何利用Vue2實(shí)現(xiàn)全局水印的效果，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以了解下2023-07-07
Vue使用new Image()實(shí)現(xiàn)圖片預(yù)加載功能
這篇文章主要介紹了如何在 Vue 中實(shí)現(xiàn)圖片預(yù)加載的一個簡單小demo以及優(yōu)化方案,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-11-11
Vue?項(xiàng)目的成功發(fā)布和部署的實(shí)現(xiàn)
本文主要介紹了Vue?項(xiàng)目的成功發(fā)布和部署的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點(diǎn)
過去在Vue2中,我們采用ref來獲取標(biāo)簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2022-11-11