Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#4053 closed enhancement (wontfix)

dojo.animateProperty should not require and HTMLElement to work

Reported by: guest Owned by: Bryan Forbes
Priority: high Milestone: 1.0
Component: fx Version: 1.0
Keywords: Cc: jayant.b.sai@…
Blocked By: Blocking:

Description

Currently the dojo.animateProperty provides a GREAT framework to do any kind of animation. It should be de-coupled from working only with HTMLElements. For example if I want to simply animate the increment of a user inputted number, I need to currently provide a dummy div so that the property animation works.

var start = dojo.byId("start").value; //previous value
var end = dojo.byId("end").value; //user inputted value
dojo.animateProperty({ node:document.createElement("div"), //dummy div
                       properties:{ value:{ start:start, end:end } }, 
                       onAnimate:function() { dojo.byId("anim").innerHTML = parseFloat(arguments[0].value) } }).play();

It would be great to not at all provide the dummy div, but just do property animation.

Also currently the arguments[0].value returns <value>px. If there is no node provided, the 'px' could be excluded.

Attachments (1)

number_animation.html (1.1 KB) - added by guest 12 years ago.
Application showing current animateProperty usage

Download all attachments as: .zip

Change History (5)

Changed 12 years ago by guest

Attachment: number_animation.html added

Application showing current animateProperty usage

comment:1 Changed 12 years ago by Adam Peller

Version: 0.91.0

comment:2 Changed 12 years ago by Bryan Forbes

Milestone: 0.91.0

Deferring to 1.0 since this is an enhancement and we're in a freeze.

comment:3 Changed 12 years ago by Bryan Forbes

Resolution: wontfix
Status: newclosed

I don't think that this is a valid enhancement. animateProperty works on CSS properties, not node properties. You probably just want to use a dojo._Animation with a dojo._Line.

comment:4 Changed 12 years ago by guest

Cool. Thanks for the hint. Here's the updated code:

var start = parseFloat(dojo.byId("start").value);
var end = parseFloat(dojo.byId("end").value);
var anim = new dojo._Animation({curve:new dojo._Line(start, end),
                                onAnimate:function() { console.log(arguments[0]); } }).play();

One thing to note, you should make sure that the start & end values are numerical. I noticed that if I didn't have the 'parseFloat', it appended a '0'.

Note: See TracTickets for help on using tickets.