Hangout, Evernote menu effects in dataTables

问题

So I have set of data in jquery DataTables plugin and what I am trying to achieve is a List of actions popup under one action control. For clear example I would like to give example of Hangouts and Evernote application which has that particular functionality and below image shows it:

So left side of the image you can see hangout's + control which when clicked expands to a view which will be like right side of image i.e. with all other different actions and some fade In from bottom right

Below is what I am upto but the below solution is kind of typical because it will have CSS problem and that particular fade In from bottom right animation I wasn't able to achieve and at present I have kept just fadeIn.

For better understanding here is the DEMO and what I am currently upto

If you click on any + of any row you can see an overlay and 2 more controls appended upwards. Now if you click on first row it will be appended but top control will be partially visible since it is position:absolute [.appeartop] in below css and margin-top has been given for both edit and delete controls.

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*/
}

$(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']]
    } );
});

So basically I have 2 problems here:

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

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

回答1:

All right. I have a created a jsFiddle for you which you can find here. Here are the details:

I resorted to use TweenMax, one of the animation tools provided by GSAP, documentation of which can be found here.
I also created an .overlay-container element on top of your already existing .overlay element. Reason to be followed.
Initially, I am setting a few CSS properties of both .overlay-container as well as .overlay elements using the .set() method of TweenMax.
The important ones are borderRadius, scaleX and scaleY properties on .overlay element and overflow property on .overlay-container element. That is the reason why I created the .overlay-container on top of .overlay i.e. to set the overflow to hidden.
Upon clicking on .action element, .overlay element is animated by the use of .fromTo() (and .to() method when fading out) and the main properties that are animating are: autoAlpha, scaleX and scaleY.
Another thing to note here is that in order to position the circle to wherever the clicked .action element is, I used jQuery's .offset() method to get its position and set that to .overlay element just before fading in.
The rest is pretty much the same code as yours.

JavaScript: (trimmed down version, only showing the fade-in part)

...
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
});
...

Hope this helps.

Update:

I encourage you to explore this amazing tool. All credit to the creators who built this. I posted a similar introductory answer a few days ago that you may find useful re GSAP.
Also, I modified the existing fiddle just a little bit more to correct the positioning of the .overlay element to start exactly from the centre of the clicked .action element. Modified fiddle can be found here and the modification itself is to be found on the lines: 486 and 487 of this updated fiddle.

来源：https://stackoverflow.com/questions/32225748/hangout-evernote-menu-effects-in-datatables

标签

javascript

jquery

jquery-animate

tweenmax

gsap