因此，我在jquery DataTables插件中设置了一组数据，而我想要实现的是在一个动作控件下弹出的动作列表。对于清晰的示例，我想举一个具有特定功能的Hangouts和Evernote应用程序示例，下图显示了该示例：
因此，在图像的左侧，您可以看到视频群聊的+控件，当单击该控件时，该控件会扩展为一个与图像右侧相似的视图，即使用所有其他不同的操作，并且从右下角淡入
以下是我要解决的问题，但是以下解决方案是一种典型的解决方案，因为它会出现CSS问题，而右下角动画无法实现特定的淡入效果，目前我只保留了fadeIn。
为了更好地理解，这里是DEMO以及我目前正在做什么
如果单击任何行中的任何+，则可以看到一个叠加层和两个附加的控件。现在，如果您单击第一行，它将被附加，但是顶部控件将部分可见，因为在position:absolute下面是.appeartop [css]，并且为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']]
} );
});
所以基本上我在这里有两个问题：
-如何在不离开屏幕的情况下放置控件？
-如何从右下角获取
.overlay的动画？ 最佳答案
行。我为您创建了一个jsFiddle，您可以找到here。详细信息如下：
我求助于使用TweenMax，这是GSAP提供的动画工具之一，其文档可以在here中找到。
我还在您现有的.overlay-container元素之上创建了一个.overlay元素。要遵循的原因。
最初，我使用TweenMax的.overlay-container方法设置.overlay和.set()元素的一些CSS属性。
重要的是borderRadius元素上的scaleX，scaleY和.overlay属性以及overflow元素上的.overlay-container属性。这就是为什么我在.overlay-container顶部创建.overlay的原因，即将overflow设置为hidden。
单击.action元素后，将通过使用.overlay（以及淡出时为.fromTo()方法）为.to()元素设置动画，并且进行动画处理的主要属性为：autoAlpha，scaleX和。
这里要注意的另一件事是，为了将圆放置到单击的scaleY元素所在的位置，我使用了jQuery的.action方法获取其位置，并在淡入之前将其设置为.offset()元素。
其余代码与您的代码几乎相同。
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
});
...
希望这可以帮助。
更新：
我鼓励您探索这个惊人的工具。所有归功于创建此文件的创建者。我几天前发布了similar introductory answer，您可能会发现关于GSAP有用的信息。
另外，我对现有小提琴进行了一些修改，以更正
.overlay元素的位置，使其完全从单击的.overlay元素的中心开始。可以在here中找到经过修改的小提琴，并且可以在以下行中找到修改的小提琴：此更新的小提琴的486和487。关于javascript - 环聊，数据表中的Evernote菜单效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32225748/