vue实现鼠标移过出现下拉二级菜单功能

2023-08-04 15:54:04 267

1.我曾经听一位快十年前端大佬说过一句话,就是能用css实现的动画，就用css不要用js去实现因为在渲染上css肯定比js效果更好

我用jquery曾经实现过鼠标点击出现下拉菜单有点和面包屑和标签页导航类似后来参加工作了公司一直在用vue所以很多用jqeury写的项目都要用vue来重构这其中不免碰见了有一些动画效果虽然很简单

我也曾想着就用jquery去实现吧代码多一点无所谓了但最后却不是这样vue好像和jquery中的有些插件冲突了只要vue已导入那些用jquery实现的动画就不能用但又不能不用vue没办法这些效果只能用vue来实现了

vue官方提供了一种动画效果是transition 下面是vue官方的经典例子

vue监听的元素一旦从dom树发生类似删除重新创建 =》removeElement createElement display:block; display:none;

对应vue中的v-if 和v-show 就可以算是触发一种动画效果从用户角度来说都是上面俩种情况都是从无到有的出现在界面上

.fade-enter-active,.fade-leave-active{//定义元素进入页面时和离开页面时的效果
transition:opacity.5s;//设置透明度默认是11是不透明0是全透明全透明相当于消失在页面上transitioncss3的过度效果
}
.fade-enter,.fade-leave-to/*.fade-leave-activebelowversion2.1.8*/{
opacity:0;//设置元素进入前和离开后都是纯透明状态
}

//设置一个按钮通过v-show控制元素的显示隐藏



Toggle


//这个是必须的
hello//这里的name和css样式中的那个fade也是一致的让p元素displayblock和node之间切换

varapp1=newVue({ el:'#app',//或者'#app' data:{ show:false//vue实例定义一个变量 } })

上面的这个例子算是vue中经典的例子了如果你不想写样式的话你可以结合第三方插件库也可以快速实现vue中的动画效果

我这里用的是animate.css动画库

//cdn



点击


hello

vue实例和上面的一模一样就不写了下面我附上animate.css的地址

https://daneden.github.io/animate.css/

3.其实吧在工作中你可能就实现一个小动画好像没必要引进那么大的animate插件库我在工作中就用的方法1 除非你的项目要大量用到动画并且需要不同的表现效果那还是推荐使用插件库

下面我说我的实际工作怎么解决的

我要实现一个鼠标移过出现下拉菜单

.fade-enter-active,.fade-leave-active{
transition:opacity.5s;
}
.fade-enter,.fade-leave-to/*.fade-leave-activebelowversion2.1.8*/{
opacity:0;
}

//这里是鼠标移动过给show赋值每一个遍历li的下标离开赋值给-1

//童鞋们知道为啥赋值成-1吗因为之前我赋值给false发现下标是0的时候跟false是相等的这个算是疏忽了

//这样就实现了鼠标移动过不同的li会出现当前li下的的下拉菜单动画经理也没说非要拿吗高级所以没有在写出什么复杂的动画说实话本人实力暂时也不是很强哈哈这里的i和show都是变量所以可以直接在@mouseover事件中使用很多童鞋可能忘记了这种用法只知道事件后面一定要绑定方法其实给变量赋值也是可以的



企业文化|







公司理念

发展战略

发展历程

varapp1=newVue({ el:'#app',//或者'#app' data:{ show:-1//vue实例定义一个变量 } })

好了这个算是今天的一个小收获到此结束我会持续更新把碰见的问题共享出来让很多童鞋少走弯路本人一直在向大牛的路上努力前进着

总结

以上所述是小编给大家介绍的vue实现鼠标移过出现下拉二级菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue实现鼠标移过出现下拉二级菜单功能

企业文化|

热门推荐

随机推荐