vue实现鼠标移过出现下拉二级菜单功能_vue下拉框二级联动 - CSDN文库

97 浏览量更新于2023-03-03 评论收藏 73KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

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 除非你的项目

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38703955

粉丝: 2
资源: 915

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈