Settings: Implement sub-subpages, and clean up some animations.

chrome/browser/resources/settings/settings_page/settings_animations.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * This file defines a set of common animations used by
  * 'settings-animated-pages'.
  */
 Polymer({
-  is: 'next-page-enter-animation',
+  is: 'settings-fade-in-animation',
 
   behaviors: [
     Polymer.NeonAnimationBehavior
   ],
 
   configure: function(config) {

[Dan Beam, 2015/08/13 21:52:10]

can you just customize polymer animations?

[tommycli, 2015/08/13 22:46:47]

I don't think so.

I haven't found an easy way to do this. Do you know if we can inherit the
polymer elements declared in this style? I know we can inherit Behaviors, but
behaviors are declared as 'Polymer.NeonAnimationBehavior ='.

We can't easily pass in the timing either. Animations declared on the controller
(neon-animated-pages) only take a name parameter. Animations declared on the
animated items (the pages themselves) can take a config. However, I never was
able to get those animations to work correctly without visual artifacts.

[Dan Beam, 2015/08/14 21:23:06]

pretty sure we can, it just may require sending a pull request to polymer

     var node = config.node;
 
     var timing = this.timingFromConfig(config);
     timing.delay = 150;
     timing.duration = 150;
 
     this._effect = new KeyframeEffect(node, [
       {'opacity': '0'},
       {'opacity': '1'}
     ], timing);
     return this._effect;
   }
 });
 
 Polymer({
-  is: 'next-page-exit-animation',
+  is: 'settings-fade-out-animation',
 
   behaviors: [
     Polymer.NeonAnimationBehavior
   ],
 
   configure: function(config) {
     var node = config.node;
 
     var timing = this.timingFromConfig(config);
     timing.duration = 150;
 
     this._effect = new KeyframeEffect(node, [
       {'opacity': '1'},
       {'opacity': '0'}
     ], timing);
     return this._effect;
   }
 });