apicloud apicloud

注册
查看: 6084|回复: 12

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

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

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

6084 12 | 发表于 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');
}




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

新手上路

UID:54932

主题:
12
帖子:
117
云币:
384
发表于 2015-5-19 09:58:35 |
支持!!!!!!!!

新手上路

UID:100623

主题:
1
帖子:
47
云币:
60

APICloud粉丝

发表于 2015-6-16 15:39:36 |
点个赞,谢谢分享

主题:
21
帖子:
514
云币:
578

APICloud粉丝APICloud毕业勋章一周年圣诞节托马斯全旋女朋友

发表于 2015-6-17 10:28:42 |
必须点赞!

主题:
31
帖子:
174
云币:
473
发表于 2015-6-20 00:40:54 |
既然做出来  顺便分享一下源码呗   照顾一下新手

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

发表于 2015-6-20 07:57:30 |
点赞点赞!

主题:
2
帖子:
13
云币:
28
发表于 2015-7-3 19:00:07 |
点个赞,谢谢分享

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

发表于 2015-7-3 22:05:32 |
点赞点赞!

主题:
203
帖子:
547
云币:
675
发表于 2015-7-7 01:22:20 |
AUI 啥啥时候发布出来  大神?

主题:
17
帖子:
511
云币:
4164

APICloud粉丝中秋节APICloud大会专属勋章

发表于 2015-7-7 06:36:57 |
赞赞赞
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表