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> 标签里，否则会报错

transition实现隐藏显示菜单栏效果相关推荐

实现详情页-电影介绍信息隐藏显示的效果
要实现的效果图示: 文字描述:当点击向下箭头,内容显示,当点击向上箭头,内容隐藏实现思路: (1)刚开始设置一个只能显示两行的盒子:这是没有设置"溢出隐藏"属性时的样子: 此时当 ...
PHP js 点击按钮切换模版,javascript点击按钮实现隐藏显示切换效果_javascript技巧...
本文实例分享了点击按钮实现隐藏和显示的切换代码,供大家参考,具体内容如下效果图: 在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此 ...
CAD界面如何隐藏显示（网页版）
控件界面上所有元素都可以控制显示或隐藏,下面逐一介绍,控件界面上的元素位置如下图: 控件界面工具栏的显示或隐藏,js代码实现如下: 1 2 3 4 5 6 7 8 9 //隐藏/显示工具栏 m ...
MTputty设置字体 MTputty菜单栏隐藏显示
MTputty菜单栏隐藏显示按Alt键实现工具栏的隐藏和显示 PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件,远程登录管理Linux系统. 安装字体打 ...
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下 ...
显示菜单栏_mac菜单栏不显示了，如何设置？
Mac顶部的菜单栏是常驻显示的,如果mac菜单栏不显示了,那么如何把它显示出来的呢?如何在Mac显示它个性鲜明的顶部菜单栏?mac菜单栏不显示了,如何设置? - macw下载站 ① 隐藏菜单栏可能会 ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
jQuery的隐藏显示hide(),show()方法
以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果,现在在jquery中有了hide();我们可以利用hide()方法来操作,希望本文章给大家所有帮助. ...
电脑端如何隐藏显示CAD图层内容
在日常CAD制图的过程中,我们常常需要查看CAD图纸,有时候由于图纸内容细节复杂,无法看清需要查看的具体图层内容,该怎么办呢?其实可以使用隐藏/显示图层内容的方式,将部分图层暂时隐藏起来,便于查看显示 ...

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

transition实现隐藏显示菜单栏效果相关推荐

最新文章

热门文章