vue.js實(shí)現(xiàn)點(diǎn)擊展開收起動畫效果
最近公司項(xiàng)目加了個頁面，其中要求是這樣的，點(diǎn)擊對應(yīng)列表，展開和收起，其實(shí)就是顯示和隱藏內(nèi)容部分；說來慚愧，我花了半天時間才搞出來（自黑一下~），接下來分享給大家，先上效果圖：
成都做網(wǎng)站、成都網(wǎng)站制作介紹好的網(wǎng)站是理念、設(shè)計和技術(shù)的結(jié)合。創(chuàng)新互聯(lián)公司擁有的網(wǎng)站設(shè)計理念、多方位的設(shè)計風(fēng)格、經(jīng)驗(yàn)豐富的設(shè)計團(tuán)隊(duì)。提供PC端+手機(jī)端網(wǎng)站建設(shè)，用營銷思維進(jìn)行網(wǎng)站設(shè)計、采用先進(jìn)技術(shù)開源代碼、注重用戶體驗(yàn)與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。
vue頁面：
<template>
<div class="dealRecord-wrap">
<div class="title-contant" v-for="(item,index) in items " >
<div class="title" @click="showHide(index)">
<h4>2018年0{{index+6}}月</h4>
<div class="number">800筆<i></i></div>
</div>
<div class="contant">
<ul>
<li v-for="i in item.allNumber">
{{index+6}}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
items:[
{v:'qqq',allNumber:1},
{v:'aaa',allNumber:2},
{v:'qqq',allNumber:3},
],
}
},
created(){
document.body.style.backgroundColor = '#f6f6f6';
},
mounted(){
for(var i=0;i<3;i++){ //這里取值自后臺返回的長度,設(shè)置頁面渲染完成后是否展開，此處不展開
document.getElementsByClassName('contant')[i].style.height = '0px';
}
},
components:{
},
methods:{
showHide(index){ //點(diǎn)擊展開收起
let contant = document.getElementsByClassName('contant')[index]; //這里我們通過參數(shù)index來讓瀏覽器判斷你點(diǎn)擊的是哪一個列表
let height = contant.getBoundingClientRect().height; //獲取頁面元素的當(dāng)前高度
document.getElementsByTagName('i')[index].style.transform = !!height?'rotateX(0deg)':'rotateX(180deg)';
if (!!height) {
contant.style.height = height + 'px';
let f = document.body.offsetHeight; //強(qiáng)制相應(yīng)dom重繪，使最新的樣式得到應(yīng)用
contant.style.height = '0px';
} else {
contant.style.height = 'auto';
height = contant.getBoundingClientRect().height;
contant.style.height = '0';
let f = document.body.offsetHeight;
contant.style.height = height + 'px';
}
}
},
beforeDestroy(){
document.body.style.backgroundColor = '#fff';
}
}
</script>
<style type="text/scss" lang="scss" scoped>
.dealRecord-wrap{margin-bottom: 100px;
.title-contant{overflow: hidden; /* 這個是重點(diǎn) */
.title{height: 84px;padding: 0 24px;border-bottom: 1px solid #eaeaea;/*px*/
h4{height: 84px;font-size: 28px;color: #333;display: flex;align-items: center;float: left;;margin-left: 10px;}
.number{height: 84px;font-size: 24px;color: #666;display: flex;align-items: center;float: right;}
.number i{display: inline-block;width: 23px;height: 13px;background: url('../../assets/images/icon_dropup@2x.png');background-repeat: no-repeat;background-size: 23px 13px;background-position: right 6px center;padding-right: 35px;display: flex;align-items: center; float: right;transform:rotateX(0deg);}
}
.contant{background: #fff;transition: height 1s; /* 這個也是重點(diǎn) */
ul li{padding: 0 24px;height: 142px;display: flex;align-items: center;}
ul li:not(:last-child){border-bottom: 1px solid #f6f6f6;/*px*/}
}
}
}
</style> 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
名稱欄目：vue.js實(shí)現(xiàn)點(diǎn)擊展開收起動畫效果
文章鏈接：http://jinyejixie.com/article44/ppecee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、軟件開發(fā)、自適應(yīng)網(wǎng)站、ChatGPT、做網(wǎng)站、網(wǎng)站內(nèi)鏈
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
