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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
php实现复制移动文件的方法
2015/07/29 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python with语句的原理与用法详解
2020/03/30 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
keras中的backend.clip用法
2020/05/22 Python
Pytorch转tflite方式
2020/05/25 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
工作经验交流材料
2014/12/30 职场文书
结婚司仪主持词
2015/06/29 职场文书
预备党员入党感言
2015/08/01 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
python实现层次聚类的方法
2021/11/01 Python