Animation: Deprecate combo CSS classes in favor of discrete ones.

Previously CSS animation classes had to target both the history direction
(forward/back) as well as the animation point (start/end) via a combination
class, even if the properties were shared:
```
.spf-animate-forward-start .spf-animate-new,
.spf-animate-forward-end   .spf-animate-old,
.spf-animate-reverse-start .spf-animate-new,
.spf-animate-reverse-end   .spf-animate-old {
  opacity: 0;
}
```

Now, the classes will be split into discrete ones that represent a single
target only:
`.spf-animate-forward-start  ->  .spf-animate-forward.spf-animate-start`
`.spf-animate-reverse-end  ->  .spf-animate-reverse.spf-animate-end`

This allows less verbose CSS when doing animation that does not change based
on history direction.

Progress on youtube#299.

src/client/nav/response.js

@@ -432,7 +432,9 @@ spf.nav.response.preprocess = function(url, response, opt_info, opt_callback) {
  */
 spf.nav.response.prepareAnimation_ = function(data) {
   // Add the start class to put elements in their beginning states.
+  spf.dom.classlist.add(data.element, data.dirClass);
   spf.dom.classlist.add(data.element, data.startClass);
+  spf.dom.classlist.add(data.element, data.startClassDeprecated);
   // Pack the existing content into a temporary container.
   data.oldEl = document.createElement('div');
   data.oldEl.className = data.oldClass;
@@ -456,7 +458,9 @@ spf.nav.response.prepareAnimation_ = function(data) {
  */
 spf.nav.response.runAnimation_ = function(data) {
   spf.dom.classlist.remove(data.element, data.startClass);
+  spf.dom.classlist.remove(data.element, data.startClassDeprecated);
   spf.dom.classlist.add(data.element, data.endClass);
+  spf.dom.classlist.add(data.element, data.endClassDeprecated);
   spf.debug.debug('  process done run animation', data.element.id);
 };
 
@@ -472,6 +476,8 @@ spf.nav.response.completeAnimation_ = function(data) {
   spf.dom.unpackElement(data.newEl);
   // Remove the end class to put elements back in normal state.
   spf.dom.classlist.remove(data.element, data.endClass);
+  spf.dom.classlist.remove(data.element, data.endClassDeprecated);
+  spf.dom.classlist.remove(data.element, data.dirClass);
   spf.debug.debug('  process done complete animation', data.element.id);
 };
 
@@ -778,9 +784,15 @@ spf.nav.response.Animation_ = function(el, html, cls, duration, reverse) {
   /** @type {string} */
   this.newClass = cls + '-new';
   /** @type {string} */
-  this.startClass = cls + (reverse ? '-reverse' : '-forward') + '-start';
+  this.dirClass = cls + (reverse ? '-reverse' : '-forward');
   /** @type {string} */
-  this.endClass = cls + (reverse ? '-reverse' : '-forward') + '-end';
+  this.startClass = cls + '-start';
+  /** @type {string} */
+  this.startClassDeprecated = this.dirClass + '-start';
+  /** @type {string} */
+  this.endClass = cls + '-end';
+  /** @type {string} */
+  this.endClassDeprecated = this.dirClass + '-end';
 };
 
 

src/server/demo/static/app.css

@@ -113,33 +113,27 @@ html, body {
   transition: transform 400ms ease, opacity 400ms linear;
 }
 /* Transitions fade-out old and fade-in new */
-.spf-animate-forward-start .spf-animate-old,
-.spf-animate-forward-end   .spf-animate-new,
-.spf-animate-reverse-start .spf-animate-old,
-.spf-animate-reverse-end   .spf-animate-new {
+.spf-animate-start .spf-animate-old,
+.spf-animate-end   .spf-animate-new {
   opacity: 1;
 }
-.spf-animate-forward-start .spf-animate-new,
-.spf-animate-forward-end   .spf-animate-old,
-.spf-animate-reverse-start .spf-animate-new,
-.spf-animate-reverse-end   .spf-animate-old {
+.spf-animate-start .spf-animate-new,
+.spf-animate-end   .spf-animate-old {
   opacity: 0;
 }
 /* transitions slide-out old and slide-in new */
-.spf-animate-forward-start .spf-animate-old,
-.spf-animate-forward-end   .spf-animate-new,
-.spf-animate-reverse-start .spf-animate-old,
-.spf-animate-reverse-end   .spf-animate-new {
+.spf-animate-start .spf-animate-old,
+.spf-animate-end   .spf-animate-new {
   -webkit-transform: translate(0%, 0%);
   transform: translate(0%, 0%);
 }
-.spf-animate-forward-start .spf-animate-new,
-.spf-animate-reverse-end   .spf-animate-old {
+.spf-animate-start.spf-animate-forward .spf-animate-new,
+.spf-animate-end.spf-animate-reverse   .spf-animate-old {
   -webkit-transform: translate(150%, 0%);
   transform: translate(150%, 0%);
 }
-.spf-animate-forward-end   .spf-animate-old,
-.spf-animate-reverse-start .spf-animate-new {
+.spf-animate-end.spf-animate-forward   .spf-animate-old,
+.spf-animate-start.spf-animate-reverse .spf-animate-new {
   -webkit-transform: translate(-150%, 0%);
   transform: translate(-150%, 0%);
 }