polymer-ui-animated-pages: use observe block

googlearchive · Oct 16, 2013 · d930c7e · d930c7e
1 parent 10ff30f
commit d930c7e
Showing 1 changed file with 21 additions and 22 deletions.
diff --git a/polymer-ui-animated-pages/index.html b/polymer-ui-animated-pages/index.html
@@ -182,25 +182,34 @@
           duration: 0.5,
           transitionInIndex: 2,
           transitionOutIndex: 2,
+          observe: {
+            transitionInIndex: 'makeTransition',
+            transitionOutIndex: 'makeTransition'
+          },
           ready: function() {
-            this.transitionIsStringChanged(),
-            this.transitionInIndexChanged();
-            this.transitionOutIndexChanged();
+            this.transitionIsStringChanged();
           },
           makeTransition: function() {
-            if (!this.transitionIsString && this.transitionIn && this.transitionOut) {
-              var transition = document.createElement('polymer-animation-group');
-              transition.appendChild(this.transitionOut.cloneNode(true));
-              transition.appendChild(this.transitionIn.cloneNode(true));
-              transition.setAttribute('duration', this.duration);
-              if (this.transition && typeof(this.transition) !== 'string') {
-                this.transition.unbindAll();
+            if (!this.transitionIsString) {
+              var transitionInId = this.$.transitionInSelect.selectedOptions[0].textContent;
+              var transitionIn = this.$[transitionInId];
+              var transitionOutId = this.$.transitionOutSelect.selectedOptions[0].textContent;
+              var transitionOut = this.$[transitionOutId];
+              if (transitionIn && transitionOut) {
+                var transition = document.createElement('polymer-animation-group');
+                transition.appendChild(transitionOut.cloneNode(true));
+                transition.appendChild(transitionIn.cloneNode(true));
+                if (this.transition && typeof(this.transition) !== 'string') {
+                  this.transition.unbindAll();
+                }
+                this.transition = transition;
               }
-              this.transition = transition;
             }
           },
           durationChanged: function() {
-            this.makeTransition();
+            Platform.endOfMicrotask(function() {
+              this.makeTransition();
+            }.bind(this));
           },
           transitionIsStringChanged: function() {
             if (this.transitionIsString) {
@@ -209,16 +218,6 @@
               this.makeTransition();
             }
           },
-          transitionInIndexChanged: function() {
-            var transitionInId = this.$.transitionInSelect.selectedOptions[0].textContent;
-            this.transitionIn = this.$[transitionInId];
-            this.makeTransition();
-          },
-          transitionOutIndexChanged: function() {
-            var transitionOutId = this.$.transitionOutSelect.selectedOptions[0].textContent;
-            this.transitionOut = this.$[transitionOutId];
-            this.makeTransition();
-          },
           rewindAction: function() {
             this.page -= 1;
             if (this.page < 0) {