[css-transitions-2] Add CSSTransition interface

Author: birtles

css-transitions-2/Overview.bs

@@ -55,8 +55,8 @@ The <dfn>owning element</dfn> of a transition refers to the element or
 pseudo-element to which the 'transition-property' property was applied that
 generated the animation.
 
-If a transition was generated directly by script then it has no <a>owning
-element</a>.
+If a transition was generated directly by script (e.g. using the
+{{CSSTransition}} constructor) then it has no <a>owning element</a>.
 
 If a transition generated using the markup defined in this specification is
 later disassociated from that markup because it is cancelled or replaced by
@@ -70,9 +70,9 @@ cancel an animation).
 
 ## Animation composite order ## {#animation-composite-order}
 
-<a spec='web-animations'>Animations</a> generated from the markup defined in
-this specification have an <a>animation type</a> of
-&lsquo;CSS Transition&rsquo;.
+<a spec='web-animations'>Animations</a> generated from the markup and
+interfaces (e.g. the {{CSSTransition}} constructor) defined in this
+specification have an <a>animation type</a> of &lsquo;CSS Transition&rsquo;.
 
 CSS Transitions have an <em>earlier</em> composite order that CSS Animations
 and animations without a specific <a>animation type</a>.
@@ -120,10 +120,8 @@ Note, this behavior relies on the fact that disassociating a transition
 from its <a>owning element</a> always causes it to enter (or remain) in the
 <a>idle play state</a>.
 
-<!--
-Transitions created using the {{CSSTransition()}} constructor are appended
+Transitions created using the {{CSSTransition}} constructor are appended
 to the <a>global animation list</a> at the moment they are constructed.
--->
 
 # Transition Events # {#transition-events}
 
@@ -150,6 +148,65 @@ to the <a>global animation list</a> at the moment they are constructed.
 			</ul>
 	</dl>
 
+# DOM Interfaces # {#DOM-interfaces}
+
+## The CSSTransition interface ## {#the-CSSTransition-interface}
+
+<pre class="idl">
+interface CSSTransition : Animation {
+  readonly attribute DOMString transitionProperty;
+};
+</pre>
+
+:   <dfn attribute for=CSSTransition>transitionProperty</dfn>
+::  The <a>expanded transition property name</a> of this transition.
+
+<div class="issue">
+
+This interface needs a constructor. Perhaps something like the following,
+
+<pre class="idl">
+[Constructor (Animatable? target,
+              DOMString transitionProperty,
+              any transitionValue,
+              optional (unrestricted double or KeyframeEffectOptions) options),
+ Constructor (Animatable? target,
+              DOMString transitionProperty,
+              any transitionValue,
+              (unrestricted double or KeyframeEffectOptions) options,
+              AnimationTimeline? timeline)]
+partial interface CSSTransition { };
+</pre>
+
+Using <code>any</code> as the type for <code>transitionValue</code> would allow
+the following usage:
+
+<pre class="example lang-javascript">
+  var transition = new CSSTransition(elem, 'opacity', 1, 2000);
+  transition.play();
+</pre>
+
+The above example, however, is <em>not</em> equivalent to triggering a
+transition. It has the following differences:
+
+*   It does not update the specified style.
+*   It would not cancel any existing transition on the given property unless
+    we add special wording to that effect.
+*   It would exhibit different composite order to a regular transition
+    (this should be easily fixed, however).
+*   It has been suggested that <a
+    href="https://github.com/w3c/web-animations/issues/62#issuecomment-117357703">script-generated
+    animations should not apply to the transition level of the cascade</a>.
+
+It is unclear how much we should extend the {{CSSTransition}} constructor to
+overcome the above limitations so that it can be used to generate transitions
+programmatically, or whether we should introduce a separate helper method such
+as has been <a
+href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html">suggested
+elsewhere</a>.
+
+</div>
+
 <h2 id="issues-common">Issues commonly raised as issues with previous levels</h2>
 
 	<p>