请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
12下一页
返回列表 发新帖
显示全部楼层
53
帖子
0
勋章
564
Y币

【新手教程】利用css3动画简单实现listview点击显示操作菜单

[复制链接]
发表于 2015-5-19 01:22:36
在list中有时会用到一些操作类的处理,比如联系人。如果不想使用原生模块或者弹出菜单的形式,可以借鉴下下面的方法

实现:
点击列表后显示从右侧滑动显示操作菜单,点击关闭按钮隐藏

思路很简单,大家可以借鉴下

效果


css 列表样式还是需要大家自己去完成,多多动手

实现原理: 点击列表,给当前div添加 class=“show”, show设置css3动画。点击关闭按钮隐藏
list 绝对定位 relative
manager  浮动  absolute并默认隐藏  display:none;

show

.show {
display:block;
-webkit-animation: moveFromRight .3s ease both;
animation: moveFromRight .3s ease both;

}
webkit设置
@-webkit-keyframes moveToBottom {
        from { }
        to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {
        from { }
        to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

列表布局
<div id="demo">
        <div class="list">
                <div class="avatar">
                        <img src="avatar.img">
                </div>
                <div class="info">
                        <div class="circle-title">用户昵称</div>
                </div>
                <div class="manager">
                        <div class="manager-wrap">
                                <div>空间</div>
                                <div>会话</div>
                                <div>删除</div>
                                <div>关闭</div>
                        </div>
                </div>
        </div>
        <div class="list">
                <div class="avatar">
                        <img src="avatar.img">
                </div>
                <div class="info">
                        <div class="circle-title">用户昵称</div>
                </div>
                <div class="manager">
                        <div class="manager-wrap">
                                <div>空间</div>
                                <div>会话</div>
                                <div>删除</div>
                                <div>关闭</div>
                        </div>
                </div>
        </div>
</div>


JS类
显示
function show(obj){
    var $demo = $api.byId('demo');//获得列表容器
    var $manager = $api.next(obj, '.manager');
    var $managerList = $api.domAll($demo, 'div');//取容器下全部div
    for (var j = 0; j < $managerList.length; j++) {
        $api.removeCls($managerList[j], 'show');//移除全部show类
    }
    $api.addCls($manager, 'show');//当前增加show
}
关闭
function hide(obj){
    var $manager = $api.closest(obj, '.manager');
    $api.removeCls($manager, 'show');
}




本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
12
帖子
0
勋章
392
Y币
支持!!!!!!!!
1
帖子
0
勋章
60
Y币
点个赞,谢谢分享
21
帖子
2
勋章
596
Y币
必须点赞!
31
帖子
0
勋章
485
Y币
既然做出来  顺便分享一下源码呗   照顾一下新手
89
帖子
0
勋章
1万+
Y币
点赞点赞!
2
帖子
0
勋章
34
Y币
点个赞,谢谢分享
89
帖子
0
勋章
1万+
Y币
点赞点赞!
204
帖子
0
勋章
710
Y币
AUI 啥啥时候发布出来  大神?
17
帖子
2
勋章
2015
Y币
赞赞赞
12下一页
您需要登录后才可以回帖 登录

本版积分规则