mirror of
https://github.com/jupyter/notebook.git
synced 2024-12-21 04:10:17 +08:00
animate tooltip position
This commit is contained in:
parent
b26b20e94f
commit
e0cf20b423
@ -64,10 +64,10 @@
|
||||
right: 0px;
|
||||
}
|
||||
.tooltip {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
-webkit-transition: all 0.8s ease;
|
||||
-moz-transition: all 0.8s ease;
|
||||
-ms-transition: all 0.8s ease;
|
||||
-o-transition: all 0.8s ease;
|
||||
/*transition when "expand"ing tooltip */
|
||||
|
||||
-webkit-transition-property: height;
|
||||
@ -81,12 +81,12 @@
|
||||
box-shadow: 3px 3px 5px #999;
|
||||
/*fade-in animation when inserted*/
|
||||
|
||||
-webkit-animation: fadeOut 200ms;
|
||||
-moz-animation: fadeOut 200ms;
|
||||
animation: fadeOut 200ms;
|
||||
-webkit-animation: fadeIn 200ms;
|
||||
-moz-animation: fadeIn 200ms;
|
||||
animation: fadeIn 200ms;
|
||||
-webkit-animation: fadeOut 800ms;
|
||||
-moz-animation: fadeOut 800ms;
|
||||
animation: fadeOut 800ms;
|
||||
-webkit-animation: fadeIn 800ms;
|
||||
-moz-animation: fadeIn 800ms;
|
||||
animation: fadeIn 800ms;
|
||||
vertical-align: middle;
|
||||
background-color: #f7f7f7;
|
||||
background-image: -webkit-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%);
|
||||
@ -131,8 +131,8 @@
|
||||
-o-transform: rotate(45deg);
|
||||
}
|
||||
.tooltip.hide {
|
||||
-webkit-animation: fadeOut 200ms;
|
||||
-moz-animation: fadeOut 200ms;
|
||||
animation: fadeOut 200ms;
|
||||
-webkit-animation: fadeOut 800ms;
|
||||
-moz-animation: fadeOut 800ms;
|
||||
animation: fadeOut 800ms;
|
||||
opacity: 0;
|
||||
}
|
||||
|
@ -125,8 +125,8 @@ var IPython = (function (IPython) {
|
||||
|
||||
Tooltip.prototype.show = function(reply,pos)
|
||||
{
|
||||
this.tooltip.css('left',pos.x-30+'px');
|
||||
this.tooltip.css('top',(pos.yBot+10)+'px');
|
||||
this.tooltip.animate({'left' : pos.x-30+'px'});
|
||||
this.tooltip.animate({'top' :(pos.yBot+10)+'px'});
|
||||
this.tooltip.removeClass('hidden')
|
||||
this.tooltip.removeClass('hide');
|
||||
|
||||
|
@ -102,10 +102,10 @@
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
-webkit-transition: all 0.8s ease;
|
||||
-moz-transition: all 0.8s ease;
|
||||
-ms-transition: all 0.8s ease;
|
||||
-o-transition: all 0.8s ease;
|
||||
/*transition when "expand"ing tooltip */
|
||||
-webkit-transition-property: height;
|
||||
-webkit-transition-duration: 1s;
|
||||
@ -117,12 +117,12 @@
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
box-shadow: 3px 3px 5px #999;
|
||||
/*fade-in animation when inserted*/
|
||||
-webkit-animation: fadeOut 200ms;
|
||||
-moz-animation: fadeOut 200ms;
|
||||
animation: fadeOut 200ms;
|
||||
-webkit-animation: fadeIn 200ms;
|
||||
-moz-animation: fadeIn 200ms;
|
||||
animation: fadeIn 200ms;
|
||||
-webkit-animation: fadeOut 800ms;
|
||||
-moz-animation: fadeOut 800ms;
|
||||
animation: fadeOut 800ms;
|
||||
-webkit-animation: fadeIn 800ms;
|
||||
-moz-animation: fadeIn 800ms;
|
||||
animation: fadeIn 800ms;
|
||||
vertical-align: middle;
|
||||
|
||||
.linearGradient(13%,@c1, 39%, @c2 , 56%,@c3, 91% , @c4) ;
|
||||
@ -169,9 +169,9 @@
|
||||
|
||||
.tooltip.hide
|
||||
{
|
||||
-webkit-animation: fadeOut 200ms;
|
||||
-moz-animation: fadeOut 200ms;
|
||||
animation: fadeOut 200ms;
|
||||
-webkit-animation: fadeOut 800ms;
|
||||
-moz-animation: fadeOut 800ms;
|
||||
animation: fadeOut 800ms;
|
||||
opacity : 0;
|
||||
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user