W3C home > Mailing lists > Public > public-fx@w3.org > October to December 2015

Re: [web-animations] state and 2nd animate parameter

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 15 Oct 2015 14:40:53 -0700
Message-ID: <CAAWBYDA-ogoO5WDDU6m_X2Wd4qmqsOrOiA+Qn2SV0g6iPPzVqg@mail.gmail.com>
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
2. According to Animatable, the second argument is a
which contains an "id" key, and extends KeyframeEffectOptions.
3. KeyframeEffectOptions
defines "iterationComposite", "composite", and "spacing" keys, and
extends AnimationEffectTimingProperties.
4. 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.

Received on Thursday, 15 October 2015 21:41:41 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:49:54 UTC