From e96b469ff051492e47d0debb1fbd05330f1c17d7 Mon Sep 17 00:00:00 2001 From: piro Date: Sun, 2 May 2010 04:30:51 +0000 Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=83=96=E3=81=AE=E3=82=A2=E3=83=8B?= =?UTF-8?q?=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92CSS=20Tra?= =?UTF-8?q?nsition=E3=81=A7=E8=A1=8C=E3=81=86=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@6652 599a83e7-65a4-db11-8015-0010dcdd6dc2 --- content/treestyletab/treestyletab.css | 42 ++++++++++++ content/treestyletab/treestyletabbrowser.js | 76 +++++++++++++-------- modules/utils.js | 5 +- 3 files changed, 95 insertions(+), 28 deletions(-) diff --git a/content/treestyletab/treestyletab.css b/content/treestyletab/treestyletab.css index b4e8a662..be2face9 100644 --- a/content/treestyletab/treestyletab.css +++ b/content/treestyletab/treestyletab.css @@ -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; +} diff --git a/content/treestyletab/treestyletabbrowser.js b/content/treestyletab/treestyletabbrowser.js index 7d456f96..e89b7372 100644 --- a/content/treestyletab/treestyletabbrowser.js +++ b/content/treestyletab/treestyletabbrowser.js @@ -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,14 +3996,25 @@ TreeStyleTabBrowser.prototype = { var deltaOpacity = endOpacity - startOpacity; var collapseProp = 'margin-'+this.collapseTarget; - aTab.setAttribute(this.kCOLLAPSING, true); - aTab.setAttribute( - 'style', - aTab.getAttribute('style') - .replace(this.collapseRulesRegExp, '')+';'+ - collapseProp+': -'+startMargin+'px !important;'+ - 'opacity: '+startOpacity+' !important;' - ); + 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') + .replace(this.collapseRulesRegExp, '')+';'+ + 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); - aTab.setAttribute( - 'style', - aTab.getAttribute('style') - .replace(self.collapseRulesRegExp, '') - .replace(self.kOPACITY_RULE_REGEXP, '') - ); + if (!CSSTransitionEnabled) { + aTab.setAttribute( + 'style', + aTab.getAttribute('style') + .replace(self.collapseRulesRegExp, '') + .replace(self.kOPACITY_RULE_REGEXP, '') + ); + } aTab.removeAttribute(offsetAttr); maxMargin = null; @@ -4043,16 +4063,18 @@ TreeStyleTabBrowser.prototype = { return true; } else { - var power = Math.sin(aTime / aDuration * radian); - var margin = startMargin + (deltaMargin * power); - var opacity = startOpacity + (deltaOpacity * power); - aTab.setAttribute( - 'style', - aTab.getAttribute('style') - .replace(self.collapseRulesRegExp, '')+';'+ - collapseProp+': -'+margin+'px !important;'+ - 'opacity: '+opacity+' !important;' - ); + 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') + .replace(self.collapseRulesRegExp, '')+';'+ + collapseProp+': -'+margin+'px !important;'+ + 'opacity: '+opacity+' !important;' + ); + } aTab.setAttribute(offsetAttr, maxMargin); return false; } diff --git a/modules/utils.js b/modules/utils.js index 329acdcb..c16178e8 100644 --- a/modules/utils.js +++ b/modules/utils.js @@ -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',