vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜單的展開、收縮功能在許多系統上都很常見，如果想要在打開收起時帶有動畫效果，過去常常會通過?jQuery 實現。而在 Vue 項目中，我們可以單獨封裝一個動畫組件，方便使用。
1，效果圖
點擊一級菜單時，子菜單會從上往下逐漸展開。
再次點擊一級菜單，子菜單又會從下往上收起。
? ??
? ??
2，創建動畫組件(collapseTransition.js)
組件代碼如下，其內容是通過 overflow 獲取高度的方法創建了一個函數式組件實現展開、收起的動畫效果。
/* 視圖伸縮動畫效果組件 */
/* jshint esversion: 6 */
const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out';
const Transition = {
'before-enter' (el) {
el.style.transition = elTransition;
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
'enter' (el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + 'px';
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.height = '';
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = 'hidden';
},
'after-enter' (el) {
el.style.transition = '';
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
},
'before-leave' (el) {
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = el.scrollHeight + 'px';
el.style.overflow = 'hidden';
},
'leave' (el) {
if (el.scrollHeight !== 0) {
el.style.transition = elTransition;
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
'after-leave' (el) {
el.style.transition = '';
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
};
export default {
name: 'collapseTransition',
functional: true,
render (h, { children }) {
const data = {
on: Transition
};
return h('transition', data, children);
}
};
3，使用樣例
使用時我們只需引入這個動畫組件，包裹在需要顯示、隱藏的元素外部即可(不再需要 css 與其它邏輯)
{{ firstLevel.title }}
{{ secondLevel.title }}
import axios from 'axios'
// 引入伸縮效果組件
import collapseTransition from './collapseTransition'
export default {
data () {
return {
isActive:false,
menus:[{
"title": "終端",
"icon": "/static/images/icon_1.png",
"isExpand": true,
"children": [{
"title": "智能物聯網邊緣計算"
}, {
"title": "終端融合能力"
}]
}, {
"title": "網絡",
"icon": "/static/images/icon_2.png",
"isExpand": true,
"children": [{
"title": "客戶側內部組織網"
}]
}]
}
},
components: {
collapseTransition
},
methods:{
//展開收起按鈕點擊
changeExpand(menu) {
menu.isExpand = !menu.isExpand;
console.log(menu.isExpand);
}
}
}
#navigation {
background-color: #e7e7e7;
}
.menu-item {
width: 327px;
height: 49px;
line-height: 49px;
font-size: 14px;
border-bottom: solid 1px #c4c4c4;
color: #3d3d3d;
cursor:pointer;
}
.first-level {
background: url(../assets/images/first_level_menu_bg.png);
font-weight: bold;
}
.first-level img:first-child {
vertical-align:middle;
margin-left: 20px;
margin-right: 15px;
}
.first-level span {
width: 230px;
display: inline-block;
}
.second-level {
width: 320px;
border-left: solid 7px #e7e7e7;
}
.second-level:hover {
background-color: #ffffff;
color: #13a3a9;
border-left: solid 7px #f6ab36;
}
.second-level img:first-child {
vertical-align:middle;
margin-left: 61px;
margin-right: 10px;
}
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php读取某类型文件代码,php代码实现
- 下一篇： vue aplayer 进度条无法拖动_