- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Thu, 15 Oct 2015 14:40:53 -0700
- To: Jonathan Wilkes <jancsika@yahoo.com>
- Cc: "public-fx@w3.org" <public-fx@w3.org>
On Mon, Oct 12, 2015 at 1:16 PM, Jonathan Wilkes <jancsika@yahoo.com> wrote: > Hi web animators, > Two questions: > 1) I have played around with the element.animate method in Chrome, with an > image "i": > var my_animation = i.animate([ { width: "10px" }, { width: "100px" } ], > 1000); > > When the animation is finished, is there a shortcut to set the "width" > property of > the element to the final value "100px"? Right now it looks like it just > resets to > whatever the property was before the animate method was called. (Currently > I'm using the onfinish callback to achieve this.) You want to use a fill mode <https://w3c.github.io/web-animations/#fill-modes>, which you can specify as part of the second argument, if you use an object instead of a number. <https://w3c.github.io/web-animations/#dictdef-animationeffecttimingproperties> > 2) For element.animate(param1, param2), is there a list somewhere of all the > possible names that can appear in the param2 object? (name as in name:value > pairs). Yes, but it's spread out a little, and you have to know how to read WebIDL. ^_^ 1. el.animate() is defined by the Animatable interface <https://w3c.github.io/web-animations/#animatable>. 2. According to Animatable, the second argument is a KeyframeAnimationOptions <https://w3c.github.io/web-animations/#dictdef-keyframeanimationoptions>, which contains an "id" key, and extends KeyframeEffectOptions. 3. KeyframeEffectOptions <https://w3c.github.io/web-animations/#dictdef-keyframeeffectoptions> defines "iterationComposite", "composite", and "spacing" keys, and extends AnimationEffectTimingProperties. 4. AnimationEffectTimingProperties <https://w3c.github.io/web-animations/#dictdef-animationeffecttimingproperties> defines "delay", "endDelay", "fill", "iterationStart", "iterations", "duration", "direction", and "easing". This is a base class, so no more extensions. So the list is the combination of the keys in 2, 3, and 4. ~TJ
Received on Thursday, 15 October 2015 21:41:41 UTC