vue实现鼠标移过出现下拉二级菜单
1.我曾经听一位快十年前端大佬说过一句话,就是能用css实现的动画,就用css不要用js去实现 因为在渲染上css肯定比js效果更好我用jquery曾经实现过鼠标点击 出现下拉菜单 有点和面包屑 和标签页导航类似 后来参加工作了 公司一直在用vue 所以很多用jqeury写的项目都要用vue来重构 这其中不免碰见了有一些动画效果 虽然很简单我也曾想着就用jquery去实现吧 代码多一...
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实例 定义一个变量
}
})
好了 这个算是今天的一个小收获 到此结束 我会持续更新把碰见的问题 共享出来 让很多童鞋少走弯路 本人一直在向大牛的路上努力前进着
更多推荐
所有评论(0)