【新手教程】利用css3动画简单实现listview点击显示操作菜单 - APICloud移动应用开发平台

在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');
}