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.s