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

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

主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需

要的朋友可以参考下

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

更好

我用jquery曾经实现过鼠标点击 出现下拉菜单 有点和面包屑 和标签页导航类似 后来参加工作了 公司一直在用vue 所以很多

用jqeury写的项目都要用vue来重构 这其中不免碰见了有一些动画效果 虽然很简单

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

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>

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">

点击

<p v-if="show">hello</p>

</transition>

</div>

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

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

3.其实吧 在工作中 你可能就实现一个小动画 好像没必要引进那么大的animate插件库 我在工作中就用的方法1 除非你的项目

要大量用到动画 并且需要不同的表现效果 那还是推荐使用插件库

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

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