子菜单的展开、收缩功能在许多系统上都很常见，如果想要在打开收起时带有动画效果，过去常常会通过 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;
}
-菜单)
