网站后台管理员扫描,wordpress api下载文件,东莞东城楼盘,四川网站建设公司 会员登录子菜单的展开、收缩功能在许多系统上都很常见#xff0c;如果想要在打开收起时带有动画效果#xff0c;过去常常会通过 jQuery 实现。而在 Vue 项目中#xff0c;我们可以单独封装一个动画组件#xff0c;方便使用。1#xff0c;效果图点击一级菜单时#xff0c;子菜单会…子菜单的展开、收缩功能在许多系统上都很常见如果想要在打开收起时带有动画效果过去常常会通过 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 ./collapseTransitionexport 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;}
