鼠标点击控制div层展开收缩

.展开收缩时使用的CSS动画完成的(此例子使用了第三种判断方法)

一.首先动态设置class：

1.三目运算符判断

<div class="hello" :class="isActive?'anmDiv':'aaa'"></div>

2.对象式判断

<div class="hello" :class="{ 'aaa': isActive, 'ccc': isSort }" />

3.在computed里面判断

     <div class="hello" :class="divStyle"></div><script>
export default {computed:{divStyle(){if(this.id===1) {return 'aaa'}else if(this.id===2){return 'ccc'}}},

二.在点击事件里设置改变div的class的属性及相应的操作

    changeWidth(){if(this.id===0 || this.id===2){this.id=1}else if(this.id===1){this.id = 2}}

三.在css里面设置动画

<style>
.hello{
width: 100px;
height: 200px;
background: #42b983;
}
.ccc{
transition: 3S;
}
.aaa{
width: 100%;
transition: 3S;
}
</style>

或者：

<style>
.hello{
width: 100px;
height: 200px;
background: #42b983;
}
.ccc{
animation:myfirst1 3s;
-moz-animation:myfirst1 3s; /* Firefox */
-webkit-animation:myfirst1 3s; /* Safari and Chrome */
-o-animation:myfirst1 3s; /* Opera */
}
@keyframes myfirst1 {from {width:100%;}
to {width:100px;}
}
.aaa{
width: 100%;
animation:myfirst 3s;
-moz-animation:myfirst 3s; /* Firefox */
-webkit-animation:myfirst 3s; /* Safari and Chrome */
-o-animation:myfirst 3s; /* Opera */
}
@keyframes myfirst
{
from {width:100px;}
to {width:100%;}
}
</style>

完整代码：

<template><div class="hello1"><div class="hello" :class="isActive?'anmDiv':'aaa'"></div>  <button @click="changeWidth">change</button></div>
</template><script>
export default {name: 'HelloWorld',data () {return {isActive: true,}},methods:{changeWidth(){if (this.isActive) {this.isActive = false} else {this.isActive = true}}}
}
</script>
<style>
.hello{
width: 100px;
height: 200px;
background: #42b983;
}
.anmDiv{
transition: 3S;}
.aaa{
width: 100%;
transition: 3S;
}
</style>

运行结果：

鼠标点击控制div层展开收缩相关推荐

div上下展开收缩 html,js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收 ...
点击UITableView的cell展开收缩
首先要理解UITableView代理方法调用的先后顺序. 当初始化UITableView后,代理回调顺序如下 1://返回cell个数 - (NSInteger)tableView:(UITableV ...
视频直播APP源码，通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果一. 实现思路需要设置一个变量控制展开 / 收起效果提前写好最高高度的class样式,超出这个高度多余内容会隐藏只有在列表数据长度 ...
鼠标悬浮移出控制div的显示与隐藏
鼠标悬浮移出控制div的显示与隐藏当鼠标悬浮在某一个触发div显示的元素上时,通常JS为:οnmοuseοver="javascript:showAlertInfo(ShowID);&qu ...
Unity3d使用鼠标点击控制人物走动无效的问题
Unity3d使用鼠标点击控制人物走动无效的问题最近在自学Unity3d,在学到使用鼠标点击控制人物走动时,按照API上面将代码写好,如下: void Update () {// _clickLis ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
判断鼠标点击在div外时，更改背景图片
学习起步时,本人试着在web端界面上仿照qq客户端主菜单,做出了一个界面. 当做到qq主菜单的搜索框时,发现点击搜索框后,里面的背景图片会消失,如下面2张图所示: 点击前 ...
Unity 鼠标点击控制玩家角色移动
1.首先创建一个角色如果有动画就添加上动画组件设置刚体.碰撞体等一系列需要的组件(看自身需求) 2.然后创建一个plane做地板(记得地板也要添加碰撞体,不然人物会一直下落) 3.然后添加一个脚本 ...
【.Net】鼠标点击控制鼠标活动范围 ClipCursor
可以使用API ClipCursor,如果你不嫌麻烦的话. 以下方法: Private Sub Form1_MouseDown(sender As System.Object, e As System ...

鼠标点击控制div层展开收缩

鼠标点击控制div层展开收缩相关推荐

最新文章

热门文章