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


Posted in Javascript onDecember 12, 2019

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;    // 设置透明度默认是1 1是不透明 0是全透明 全透明相当于消失在页面上 transition css3的过度效果
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    //设置元素进入 前和离开后都是纯透明状态 
 }
// 设置一个按钮 通过v-show 控制元素的显示隐藏

<div id="demo">
     <button v-on:click="show = !show">
      Toggle
     </button>

    <transition name="fade">   // <transition name="fade"></transition> 这个是必须的  
        <p v-if="show">hello</p>  //这里的name 和css样式中的那个 fade也是一致的 让p元素display block和node之间切换
     </transition>
 </div>

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

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

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

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">  //cdn

<div>
     <button @click="show = !show">
      点击
     </button>
     <transition
      name="custom-classes-transition"                    //使用 animate.css 虽然只是写个类名 但前面不要忘记写
      enter-active-class="animated slideInDown"           //animated 再写 你要运用的动画名称
      leave-active-class="animated slideInUp"
     >
      <p v-if="show">hello</p>
     </transition>
    </div>

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-active below version 2.1.8 */ {
     opacity: 0;    
 }

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

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

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

<li class="nLi" v-for="(v,i) of itemList" @mouseover="show=i" @mouseout="show=-1">

                  <h3><a href="">企业文化</a>|</h3>

                  <transition name="fade">

                    <div class="sub" v-show="show==i">

                        <ul>

                          <li><a href="">公司理念</a></li> 

                          <li><a href="">发展战略</a></li>

                         <li><a href="">发展历程</a></li>

                     </ul>

               </div>

        </transition>

  </li> 

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

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

总结

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

Javascript 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
微信小程序背景音乐开发详解
Dec 12 #Javascript
vue实现商城秒杀倒计时功能
Dec 12 #Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 #Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 #Javascript
vue-property-decorator用法详解
Dec 12 #Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 #Javascript
JavaScript Reflect Metadata实现详解
Dec 12 #Javascript
You might like
超级简单的发送邮件程序
2006/10/09 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
JavaScript实现区块链
2018/03/14 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
PyQt5实现登录页面
2020/05/30 Python
python给list排序的简单方法
2020/12/10 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
教师推荐信范文
2013/11/24 职场文书
秋季运动会稿件
2014/01/30 职场文书
商场总经理岗位职责
2014/02/03 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
计划生育汇报材料
2014/12/26 职场文书
教师个人师德总结
2015/02/06 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书