【新手教程】利用css3动画简单实现listview点击显示操作菜单
发布在APICloud移动应用开发平台2015年5月21日view:3097
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在list中有时会用到一些操作类的处理,比如联系人。如果不想使用原生模块或者弹出菜单的形式,可以借鉴下下面的方法

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

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

效果 enter image description here

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');
}
评论
发表评论
暂无评论
WRITTEN BY
小金宝同學coolboy
我就是太阳无需凭借谁的光!
TA的新浪微博
PUBLISHED IN
APICloud移动应用开发平台
  • 7天开发APP,重新定义移动应用开发。
  • 可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。
  • 云API:减少70%服务器端编码工作量,同时提供推送、云修复、大数据分析等服务。
  • 端API:“积木拼装”式的开发跨平台APP,为APP开发者提供大量优质的原生模块,涵盖UI、系统、交互、影音、支付等类型的原生模块。
  • 模块store:“模块Store”通过提供“1+1”的服务(一站式+一键集成),让APP开发以及第三方服务SDK的集成变得非常简单,可以像逛超市一样在APICloud“模块Store”挑选自己中意的第三方服务,只需在线一键绑定,就可以实现不同服务的快速集成。
  • 官方网站:www.apicloud.com

友情链接 大搜车前端团队博客
我的收藏