transition实现隐藏显示菜单栏效果

今天使用<transition>标签做了隐藏显示菜单栏的效果，下面和小编一起来看看如何实现吧
我们知道<transition>标签是用来做动画效果的，把菜单栏的隐藏和显示看做一个动画效果就可以了
菜单容器的css动画样式如下：

-webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
    -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
    -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
    transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

使用vue给菜单容器绑定另一个样式
绑定代码示例

:class="{ 'menu-content-container-no': MenuActiveKey == 0,  }" 

其中，menu-content-container-no是绑定的另一个css样式
MenuActiveKey 是data里声明的一个数据，
MenuActiveKey 的值为1 ，表示 显示菜单
MenuActiveKey 的值为0 ，表示 隐藏菜单
MenuActiveKey 的值默认为1，显示菜单

menu-content-container-no样式里写的是 隐藏菜单的样式

display: none;
transform: translate3d(100%, 0, 0);

菜单默认情况下是打开的，点击按钮(添加一个判断条件：v-if="MenuActiveKey == 1")使菜单隐藏，给按钮添加click事件
代码示例：

handleRest() {
   this.MenuActiveKey = this.MenuActiveKey == 0 ? 1 : 0;
},

隐藏菜单后，会显示另一个按钮，点击此按钮会显示菜单：
按钮的要加一个判断条件 v-if="MenuActiveKey == 0"

 handleChangeNum() {
    this.MenuActiveKey = this.MenuActiveKey == 0 ? 1 : 0;
}
,

注意：
在<transition>标签里写内容的时候，在<transition>标签里写一个<div>标签，把所有的内容都放在这个<div> 标签里，否则会报错