タブのアニメーションをCSS Transitionで行うようにした
git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@6652 599a83e7-65a4-db11-8015-0010dcdd6dc2
This commit is contained in:
piro
parent
aee349e41c
commit
e96b469ff0
@ -150,3 +150,45 @@ image.tab-icon {
|
||||
#aiostbx-tabright-toolbox:not([incustomisemode="true"]) > toolbar:not([currentset]) {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tabbrowser-tabs[treestyletab-animation-enabled="true"][treestyletab-mode="vertical"]:not([treestyletab-tab-inverted="true"])
|
||||
.tabbrowser-tab {
|
||||
-moz-transition: margin-top 0.15s ease-out,
|
||||
opacity 0.15s ease-out,
|
||||
margin-left 0.2s ease-out;
|
||||
transition: margin-top 0.15s ease-out,
|
||||
opacity 0.15s ease-out,
|
||||
margin-left 0.2s ease-out;
|
||||
}
|
||||
|
||||
.tabbrowser-tabs[treestyletab-animation-enabled="true"][treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]
|
||||
.tabbrowser-tab {
|
||||
-moz-transition: margin-top 0.15s ease-out,
|
||||
opacity 0.15s ease-out,
|
||||
margin-right 0.2s ease-out;
|
||||
transition: margin-top 0.15s ease-out,
|
||||
opacity 0.15s ease-out,
|
||||
margin-right 0.2s ease-out;
|
||||
}
|
||||
|
||||
.tabbrowser-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"]):not([treestyletab-tab-inverted="true"])
|
||||
.tabbrowser-tab {
|
||||
-moz-transition: margin-left 0.15s ease-out,
|
||||
opacity 0.15s ease-out,
|
||||
margin-top 0.2s ease-out;
|
||||
transition: margin-left 0.15s ease-out,
|
||||
opacity 0.15s ease-out,
|
||||
margin-top 0.2s ease-out;
|
||||
}
|
||||
|
||||
.tabbrowser-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"])[treestyletab-tab-inverted="true"]
|
||||
.tabbrowser-tab {
|
||||
-moz-transition: margin-left 0.15s ease-out,
|
||||
opacity 0.15s ease-out,
|
||||
margin-bottom 0.2s ease-out;
|
||||
transition: margin-left 0.15s ease-out,
|
||||
opacity 0.15s ease-out,
|
||||
margin-bottom 0.2s ease-out;
|
||||
}
|
||||
|
||||
@ -570,6 +570,7 @@ TreeStyleTabBrowser.prototype = {
|
||||
this.onPrefChange('extensions.treestyletab.showBorderForFirstTab');
|
||||
this.onPrefChange('extensions.treestyletab.tabbar.invertTabContents');
|
||||
this.onPrefChange('extensions.treestyletab.tabbar.invertClosebox');
|
||||
this.onPrefChange('extensions.treestyletab.animation.enabled');
|
||||
|
||||
var tabContextMenu = b.tabContextMenu ||
|
||||
document.getAnonymousElementByAttribute(b, 'anonid', 'tabContextMenu');
|
||||
@ -1486,6 +1487,10 @@ TreeStyleTabBrowser.prototype = {
|
||||
this.checkTabsIndentOverflow();
|
||||
break;
|
||||
|
||||
case 'extensions.treestyletab.animation.enabled':
|
||||
this.setTabbrowserAttribute(this.kANIMATION_ENABLED, value ? 'true' : null );
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@ -3664,18 +3669,20 @@ TreeStyleTabBrowser.prototype = {
|
||||
|
||||
var regexp = this.indentRulesRegExp;
|
||||
var property = this.indentProp+'-'+aTarget;
|
||||
var CSSTransitionEnabled = ('Transition' in aTab.style || 'MozTransition' in aTab.style);
|
||||
if (
|
||||
!this.animationEnabled ||
|
||||
aJustNow ||
|
||||
this.indentDuration < 1 ||
|
||||
!aTarget ||
|
||||
CSSTransitionEnabled ||
|
||||
this.isCollapsed(aTab)
|
||||
) {
|
||||
aTab.setAttribute(
|
||||
'style',
|
||||
aTab.getAttribute('style')
|
||||
.replace(regexp, '')+';'+
|
||||
(aTarget ? property+':'+aIndent+'px !important;' : '' )
|
||||
(aTarget || CSSTransitionEnabled ? property+':'+aIndent+'px !important;' : '' )
|
||||
);
|
||||
return;
|
||||
}
|
||||
@ -3931,6 +3938,8 @@ TreeStyleTabBrowser.prototype = {
|
||||
aTab.removeAttribute(this.kX_OFFSET);
|
||||
aTab.removeAttribute(this.kY_OFFSET);
|
||||
|
||||
aTab.setAttribute(this.kCOLLAPSING_PHASE, aCollapsed ? this.kCOLLAPSING_PHASE_TO_BE_COLLAPSED : this.kCOLLAPSING_PHASE_TO_BE_EXPANDED );
|
||||
|
||||
if (
|
||||
!this.animationEnabled ||
|
||||
aJustNow ||
|
||||
@ -3944,7 +3953,6 @@ TreeStyleTabBrowser.prototype = {
|
||||
.replace(this.collapseRulesRegExp, '')
|
||||
.replace(this.kOPACITY_RULE_REGEXP, '')
|
||||
);
|
||||
aTab.removeAttribute(this.kCOLLAPSING);
|
||||
if (aCollapsed)
|
||||
aTab.setAttribute(this.kCOLLAPSED_DONE, true);
|
||||
else
|
||||
@ -3988,7 +3996,17 @@ TreeStyleTabBrowser.prototype = {
|
||||
var deltaOpacity = endOpacity - startOpacity;
|
||||
var collapseProp = 'margin-'+this.collapseTarget;
|
||||
|
||||
aTab.setAttribute(this.kCOLLAPSING, true);
|
||||
var CSSTransitionEnabled = ('Transition' in aTab.style || 'MozTransition' in aTab.style);
|
||||
if (CSSTransitionEnabled) {
|
||||
aTab.setAttribute(
|
||||
'style',
|
||||
aTab.getAttribute('style')
|
||||
.replace(this.collapseRulesRegExp, '')+';'+
|
||||
collapseProp+': -'+endMargin+'px !important;'+
|
||||
'opacity: '+endOpacity+' !important;'
|
||||
);
|
||||
}
|
||||
else {
|
||||
aTab.setAttribute(
|
||||
'style',
|
||||
aTab.getAttribute('style')
|
||||
@ -3996,6 +4014,7 @@ TreeStyleTabBrowser.prototype = {
|
||||
collapseProp+': -'+startMargin+'px !important;'+
|
||||
'opacity: '+startOpacity+' !important;'
|
||||
);
|
||||
}
|
||||
|
||||
if (!aCollapsed) aTab.removeAttribute(this.kCOLLAPSED_DONE);
|
||||
|
||||
@ -4017,14 +4036,15 @@ TreeStyleTabBrowser.prototype = {
|
||||
}
|
||||
if (aTime >= aDuration || stopAnimation) {
|
||||
delete aTab.__treestyletab__updateTabCollapsedTask;
|
||||
aTab.removeAttribute(self.kCOLLAPSING);
|
||||
if (aCollapsed) aTab.setAttribute(self.kCOLLAPSED_DONE, true);
|
||||
if (!CSSTransitionEnabled) {
|
||||
aTab.setAttribute(
|
||||
'style',
|
||||
aTab.getAttribute('style')
|
||||
.replace(self.collapseRulesRegExp, '')
|
||||
.replace(self.kOPACITY_RULE_REGEXP, '')
|
||||
);
|
||||
}
|
||||
aTab.removeAttribute(offsetAttr);
|
||||
|
||||
maxMargin = null;
|
||||
@ -4043,9 +4063,10 @@ TreeStyleTabBrowser.prototype = {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
var power = Math.sin(aTime / aDuration * radian);
|
||||
var margin = startMargin + (deltaMargin * power);
|
||||
var opacity = startOpacity + (deltaOpacity * power);
|
||||
if (!CSSTransitionEnabled) {
|
||||
let power = Math.sin(aTime / aDuration * radian);
|
||||
let margin = startMargin + (deltaMargin * power);
|
||||
let opacity = startOpacity + (deltaOpacity * power);
|
||||
aTab.setAttribute(
|
||||
'style',
|
||||
aTab.getAttribute('style')
|
||||
@ -4053,6 +4074,7 @@ TreeStyleTabBrowser.prototype = {
|
||||
collapseProp+': -'+margin+'px !important;'+
|
||||
'opacity: '+opacity+' !important;'
|
||||
);
|
||||
}
|
||||
aTab.setAttribute(offsetAttr, maxMargin);
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -69,7 +69,9 @@ var TreeStyleTabUtils = {
|
||||
kSUBTREE_COLLAPSED : 'treestyletab-subtree-collapsed',
|
||||
kCOLLAPSED : 'treestyletab-collapsed',
|
||||
kCOLLAPSED_DONE : 'treestyletab-collapsed-done',
|
||||
kCOLLAPSING : 'treestyletab-collapsing',
|
||||
kCOLLAPSING_PHASE : 'treestyletab-collapsing-phase',
|
||||
kCOLLAPSING_PHASE_TO_BE_COLLAPSED : 'collapse',
|
||||
kCOLLAPSING_PHASE_TO_BE_EXPANDED : 'expand',
|
||||
kALLOW_COLLAPSE : 'treestyletab-allow-subtree-collapse',
|
||||
|
||||
kX_OFFSET : 'treestyletab-x-offset',
|
||||
@ -86,6 +88,7 @@ var TreeStyleTabUtils = {
|
||||
kRESIZING : 'treestyletab-tabbar-resizing',
|
||||
kINDENTED : 'treestyletab-tabs-indented',
|
||||
kPRINT_PREVIEW : 'treestyletab-print-preview',
|
||||
kANIMATION_ENABLED : 'treestyletab-animation-enabled',
|
||||
|
||||
kTAB_INVERTED : 'treestyletab-tab-inverted',
|
||||
kTAB_CONTENTS_INVERTED : 'treestyletab-tab-contents-inverted',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user