dataTables 中的 Hangout、Evernote 菜单效果

Question

所以我在 jquery DataTables 插件中有一组数据，我想要实现的是一个动作控件下的动作列表弹出窗口。为了清楚起见，我想举一个 Hangouts 和 Evernote 应用程序的例子，它具有特定的功能，下图显示了它：

因此，在图像的左侧，您可以看到视频群聊的 + 控件，单击该控件会扩展为一个类似于图像右侧的视图，即所有其他不同的操作和一些从右下角淡入

下面是我正在做的，但下面的解决方案有点典型，因为它会有 CSS 问题，而且那个特定的 从右下角淡入 动画我是无法实现，目前我只保留了fadeIn。

为了更好地理解这里是 DEMO 和我目前在做什么

如果您单击任何行的任何 +，您可以看到一个叠加层和向上附加的另外 2 个控件。现在，如果您单击第一行，它将被附加，但顶部控件将部分可见，因为它是 css 下面的 position:absolute [.appeartop] 并且 margin-top 已给出edit 和 delete 都控制。

HTML

<div class="overlay"></div>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
            <th>Actions</th>
        </tr>
    </thead>
</table>

CSS

td.details-control {
    background: url('resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('resources/details_close.png') no-repeat center center;
}
.appeartop
{
    position:absolute;
    display:none;
    z-index:100000;
}
.delete{
    clear:both;
    float:left;
    margin-top:-51px;
}
.edit{
    clear:both;
    float:left;
    margin-top:-102px;
}
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display:none;
    background-color: rgba(0,0,0,0.5); /*dim the background*/
}

JS

$(document).on('click','.action',function(){ //onclick of action button
    if(!$(this).hasClass('opened'))
    {
        $(this).css('z-index','10000').addClass('opened').toggleClass('glyphicon-plus glyphicon-remove')
        $('.overlay').fadeIn("slow");//just fading in here
    }
    else
    {
        $(this).removeAttr('style').removeClass('opened').toggleClass('glyphicon-plus glyphicon-remove')
        $('.overlay').fadeOut("slow");
    }
    $(this).siblings('.controls').slideToggle();//and slidetoggle here
    
})

$('.overlay').on('click',function(){
    $(this).fadeOut("fast");
    $('.action.opened').removeAttr('style').removeClass('opened').toggleClass('glyphicon-plus glyphicon-remove')
    $.each($('.controls'),function(){
            if($(this).is(":visible"))
            {
                $(this).fadeOut("slow");
                return;
            }
    })
})


$(document).ready(function() {
    var table = $('#example').DataTable( {
        "aaData":testData,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" },
            {
                "orderable":      false,
                "data":           null,
                "defaultContent": '<div class="controls appeartop"><button class="btn btn-info glyphicon edit glyphicon-edit"></button>'
                                  +'<button class="btn btn-danger delete glyphicon glyphicon-trash"></button>'
                                  +'</div>'
                                  +'<button class="btn btn-success action glyphicon glyphicon-plus"></button>'
            }
        ],
        "order": [[1, 'asc']]
    } );
});

所以基本上我在这里有 2 个问题：

- How to position controls without they getting off-screen?

- How to get animation from bottom right for the .overlay?

Answer 1

好的。我为您创建了一个 jsFiddle，您可以找到 here。详情如下：

我用了TweenMax, one of the animation tools provided by GSAP, documentation of which can be found here.
我还在您现有的 .overlay 元素之上创建了一个 .overlay-container 元素。要遵循的原因。
最初，我使用 .set()[=79= 为 .overlay-container 和 .overlay 元素设置一些 CSS 属性] TweenMax.

的方法
重要的是 .overlay 元素上的 borderRadius、scaleX 和 scaleY 属性以及 [=11= 上的 overflow 属性 ] 元素。这就是为什么我在 .overlay 之上创建 .overlay-container 的原因，即将 overflow 设置为 hidden。

单击 .action 元素后，.overlay 元素在淡出时使用 .fromTo() (and .to() 方法动画）和主要动画属性是：autoAlpha、scaleX 和 scaleY.

这里要注意的另一件事是，为了将圆定位到点击的 .action 元素所在的位置，我使用了 jQuery 的 .offset() 方法获取其位置并将其设置为淡入之前的 .overlay 元素。

其余代码与您的几乎相同。

JavaScript:（精简版，仅显示淡入部分）

... TweenMax.set('.overlay-container', { position: 'absolute', overflow: 'hidden', width: $(document).width(), height: $(document).height() }); TweenMax.fromTo('.overlay', duration, { autoAlpha: 0, top: $(this).offset().top, left: $(this).offset().left, xPercent: -50, yPercent: -50, scaleX: 0, scaleY: 0 }, { autoAlpha: 1, scaleX: 3, scaleY: 3, ease: easeInOut }); ...

希望这对您有所帮助。

更新：

我鼓励您探索这个神奇的工具。所有功劳归功于建造它的创造者。几天前我发布了一个你可能会发现有用的 re GSAP.

另外，我稍微修改了现有的 fiddle 以更正 .overlay 元素的位置，使其正好从单击的 .action 元素的中心开始。可以在 here 中找到修改后的 fiddle 并且可以在以下行中找到修改本身：486 和 487 已更新 fiddle.

dataTables 中的 Hangout、Evernote 菜单效果

Hangout, Evernote menu effects in dataTables

javascript

jquery

jquery-animate

gsap